贵州省水利建设管理总站网站,wordpress和wix,wordpress 注册 地址,广州灰色优化网络公司好了#xff0c;兄弟们#xff0c;继昨天的项目之后#xff0c;开始继续敲前端代码#xff0c;完成前端部分
昨天完成了全局页面的代码#xff0c;和登录页面的代码#xff0c;不过昨天的代码还有一些需要补充的#xff0c;这里添加一下
内容补充#xff1a;在调用登…好了兄弟们继昨天的项目之后开始继续敲前端代码完成前端部分
昨天完成了全局页面的代码和登录页面的代码不过昨天的代码还有一些需要补充的这里添加一下
内容补充在调用登录接口之后进行一个页面的跳转
先介绍一下router路由的使用吧知道的兄弟们可以跳过哦
页面的路由1.安装vue-router npm install vue-router 4 (在终端输入命令即可)。2.在index.js中创建路由器并导出。3.main.js中使用4.router-view中展示
这里因为刚开始创建项目的时候点击了vue Router脚手架已经帮我们生成好了那就不用管了前三步自动完成我们只管使用就好了
这里在Login页面中添加
import {useRouter} from vue-router
const router useRouter()
const login async(){let result await userLoginService(loginData.value);renderIcon(result.msg?result.msg:登录成功);router.push(/)
}添加完这几行代码就OK了这里我们可以试一下能不能跳转
emmmm因为暂时没有进行后端的开发如果要测试的话此时要么把调用后端的函数给注释了要么使用接口测试工具感觉好麻烦
script setup
// import { h } from vue;
// import { IconExclamationCircleFill } from arco-design/web-vue/es/icon;
import { ref } from vue;
// import {userLoginService} from ../api/user
import {useRouter} from vue-router
const router useRouter()
const loginData ref({username: ,password: ,isRead: false,
});const rules [{validator: (value, cb) {return new Promise((resolve) {window.setTimeout(() {if (value ! ) {cb(content not empty);}resolve();}, 1000);});},},
];
// const renderIcon () h(IconExclamationCircleFill);
const login async(){// let result await userLoginService(loginData.value);// renderIcon(result.msg?result.msg:登录成功);router.push(/)
}/script
方便起见还是用注释吧。
OK我们来运行一下代码 在点击了Submit之后成功跳转到了主页面记得把函数的注释去掉 内容补充GlobalPage.vue的样式修改改了一下布局现在能全局了
style scoped
.global{height: 100vh;
}
.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-sider-children),
.layout-demo :deep(.arco-layout-content) {display: flex;flex-direction: column;justify-content: center;color: var(--color-white);font-size: 16px;font-stretch: condensed;text-align: center;
}.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer) {height: 64px;background-color: var(--color-primary-light-4);
}.layout-demo :deep(.arco-layout-sider) {width: 206px;background-color: var(--color-primary-light-3);
}.layout-demo :deep(.arco-layout-content) {background-color: rgb(var(--arcoblue-6));
}.footer {background-color: aliceblue;padding: 16px;position: sticky;bottom: 0;left: 0;right: 0;text-align: center;letter-spacing: 3px;
}
/style 内容补充 在登录页补充开发一下注册页面。
之前只写了登录页面当然也得有注册页面来打造一个
其实只要有了登录页面对于注册页面也就不难了 div classlogin-box v-if!isLogina-form:modelloginData:style{ width: 600px }submithandleSubmitclassinput-boxh2 stylemargin-bottom: 60pxLogin/h2a-form-itemfieldnametooltipPlease enter usernamelabel账号classelement:rulesrulesa-inputv-modelloginData.usernameplaceholderplease enter your username...stylemargin-right: 40px//a-form-itema-form-item fieldpost label密码 classelement :rulesrulesa-inputv-modelloginData.passwordplaceholderplease enter your password...stylemargin-right: 40px//a-form-itema-form-item fieldisReada-checkbox v-modelloginData.isReadI have read the manual/a-checkbox/a-form-itema-form-itema-button html-typesubmit classinput-box clickloginSubmit/a-button/a-form-itemdiv classregister-linka clickisLogin !isLoginDont have an account? Create Now!/a/div/a-form/div
这是之前登录页面的代码我们直接把它复制一份再把h2标签的login改成register就好了 此时页面上就出现了两个表单还记得之前的搜素框控制显示隐藏吗这个也是这样甚至更加简单 div classlogin-box v-if!isLogin在div标签这里用v-if来控制两个
回忆之前的组件开发三部曲前端样式代码htmlcss已经完成下面开始数据绑定与事件
这里我们在script代码中加上
const isLogin ref(false) //记得引入ref之前好像引入过了
那么登录页的div div classlogin-box v-if!isLogin 注册页的div div classlogin-box v-ifisLogin
这样就成功控制了一个显示一个隐藏的效果了注意其中的逻辑关系要让login先显示 然后就是控制页面的转换了当点击Dont have an account? Create Now!就转换到注册页那么可以 div classregister-link a clickisLogin !isLoginDont have an account? Create Now!/a /div
加一个点击效果进行转换
除此之外注册页面用的输入框可跟登录页不一样这里可以去组件库找找 这里可以使用其中的一些输入框和表单校验方法不过数据绑定这块建议继续用ref
然后我们前往api/user.js,为用户注册写调用后端接口方法这里跟登录差不多
import request from ../utils/request//创建一个调用登录接口函数
export const userLoginService (loginData) {//用urlSearchParams完成传递const params new URLSearchParams()for(let key in loginData){params.append(key,loginData[key]);}return request.post(/user/login,params);
}export const userRegisterService (registerData) {//用urlSearchParams完成传递const params new URLSearchParams()for(let key in registerData){params.append(key,registerData[key]);}return request.post(/user/register,params);
}
不能说长得很像只能说根本就是一模一样。。
然后我们在Login登录界面编写调用后端接口方法
const register async () { let result await userRegisterService(registerData.value); renderIcon(result.msg ? result.msg : 注册成功);
};
然后在上面submit按钮上绑定click“register”即可
下面来展示一下登录页目前的全部代码
templatediv classcontainerdiv classlogin-box v-if!isLogina-form:modelloginData:style{ width: 600px }submithandleSubmitclassinput-boxh2 stylemargin-bottom: 60pxLogin/h2a-form-itemfieldnametooltipPlease enter usernamelabel账号classelement:rulesrulesa-inputv-modelloginData.usernameplaceholderplease enter your username...stylemargin-right: 40px//a-form-itema-form-item fieldpost label密码 classelement :rulesloginRulesa-inputv-modelloginData.passwordplaceholderplease enter your password...stylemargin-right: 40px//a-form-itema-form-item fieldisReada-checkbox v-modelloginData.isReadI have read the manual/a-checkbox/a-form-itema-form-itema-button html-typesubmit classinput-box clickloginEnter/a-button/a-form-itemdiv classregister-linka clickisLogin !isLoginDont have an account? Create Now!/a/div/a-form/divdiv classlogin-box v-ifisLogina-form:modelloginData:style{ width: 600px }submithandleSubmitclassinput-boxh2 stylemargin-bottom: 60pxRegister/h2a-formrefformRef:rulesregRules:modelregisterData:style{ width: 600px }submithandleSubmita-form-item fieldname label账号 validate-triggerblura-inputv-modelregisterData.nameplaceholderplease enter your username...stylemargin-right: 60px//a-form-itema-form-item fieldpassword label密码 validate-triggerblura-input-passwordv-modelregisterData.passwordplaceholderplease enter your password...stylemargin-right: 60px//a-form-itema-form-itemfieldpassword2label确认密码validate-triggerblura-input-passwordv-modelregisterData.password2placeholderplease confirm your password...stylemargin-right: 60px//a-form-itema-form-item fieldemail labelemaila-inputv-modelregisterData.emailplaceholderplease enter your email...stylemargin-right: 60px//a-form-item/a-forma-form-itema-button html-typesubmit classinput-box clickregisterSubmit/a-button/a-form-itemdiv classregister-linka clickisLogin !isLoginHave Count? Login Now!/a/div/a-form/div/div
/template
script setup
import { h } from vue;
import { IconExclamationCircleFill } from arco-design/web-vue/es/icon;
import { ref } from vue;
import { userLoginService, userRegisterService } from ../api/user;
import { useRouter } from vue-router;
const router useRouter();
const loginData ref({username: ,password: ,isRead: false,
});const loginRules [{validator: (value, cb) {return new Promise((resolve) {window.setTimeout(() {if (value ! ) {cb(content not empty);}resolve();}, 1000);});},},
];
const renderIcon () h(IconExclamationCircleFill);
const login async () {let result await userLoginService(loginData.value);renderIcon(result.msg ? result.msg : 登录成功);router.push(/);
};const register async () {let result await userRegisterService(registerData.value);renderIcon(result.msg ? result.msg : 登录成功);
};//登录注册页显示隐藏
const isLogin ref(false);const handleSubmit ({ values, errors }) {console.log(values:, values, \nerrors:, errors);
};
const registerData ref({name: ,password: ,password2: ,email:
});const regRules {name: [{required: true,message:name is required,},],password: [{required: true,message:password is required,},],password2: [{required: true,message:password is required,},{validator: (value, cb) {if (value ! registerData.value.password) {cb(two passwords do not match)} else {cb()}}}],email: [{type: email,required: true,}],}/scriptstyle scoped
* {margin: 0;padding: 0;box-sizing: border-box;font-family: Poppins, sans-serif;display: flex;justify-content: center;
}
.container {width: 100%;height: 100vh;background: url(../assets/background.jpg) no-repeat;background-size: cover;background-position: center;display: flex;justify-content: center;align-items: center;
}.container .login-box {position: relative;width: 500px;height: 580px;background-color: transparent;border: 2px solid rgba(255, 255, 255, 0.5);border-radius: 20px;display: flex;justify-content: center;align-items: center;backdrop-filter: blur(15px);
}.login-box h2 {font-size: 28px;color: #fff;text-align: center;
}.login-box .input-box {position: relative;width: 310px;margin: 30px 0;
}.input-box input {width: 80%;height: 60px;background: transparent;border: none;outline: none;font-size: 16px;color: #fff;padding: 0 2px 0 5px;
}.input-box input::placeholder {color: #f9f9f9;
}.input-box .icon {position: absolute;right: 8px;color: #fff;font-size: 16px;line-height: 25px;
}.login-box .remember-forget {margin: -15px 0 15px;font-size: 15px;color: #fff;display: flex;justify-content: space-between;
}.remember-forget label input {margin-right: 30px;
}.login-box button {width: 100%;height: 40px;background: #fff;border: none;outline: none;border-radius: 40px;cursor: pointer;font-size: 16px;color: #000;transition: all 0.5s;
}.login-box button:hover {background: #1f73c9;color: #fff;
}.login-box .register-link {font-size: 15px;color: #fff;text-align: center;margin: 5px 0 5px;
}.remember-forget a,
.register-link a {color: #fff;text-decoration: none;
}.remember-forget a:hover,
.register-link a:hover {text-decoration: underline;
}/* Responsive Design */
media (max-width: 460px) {.container .login-box {width: 350px;}.login-box .input-box {width: 290px;}
}media (max-width: 360px) {.container .login-box {width: 100%;height: 100vh;border: none;}
}
.element {margin: 20px 0;
}
/style 全局页面跳转解决
既然都讲到页面路由了就多练练吧
在全局页面GlobalPage.vue这一块我们把之前写死的searchPage去掉改成可变的router-view
templatea-layout styleheight: 400pxa-layout-headerglobal-header/global-header/a-layout-headera-layouta-layout-sider themedarkSider/a-layout-sidera-layout-contentrouter-view/router-view/a-layout-content!--就是这里--/a-layouta-layout-footerglobal-footer classfooter/global-footer/a-layout-footer/a-layout
/template
然后就可以开始布置了现在点击GlobalHeader.vue全局头部
templatediv classmenu-demoa-menu modehorizontal themedark :default-selected-keys[1]a-menu-itemkey0:style{ padding: 0, marginRight: 38px }disabledclasslogodiv:style{width: 180px,height: 30px,background: var(--color-fill-3),cursor: text,}img src../assets/logo.png width180px/div/a-menu-itema-menu-item key1router-link to/main/search全局搜索/router-link/a-menu-itema-menu-item key2router-link to/main/article文章大全/router-link/a-menu-itema-menu-item key3Cloud Service/a-menu-itema-menu-item key4Cooperation/a-menu-item/a-menu
这里修改一下a-menu-item标签一般在组件库这里会有专门的跳转属性这种不过今天好像组件库页面打不开了那暂时就用原始版的router-link来实现一下吧之后我会修改一下的
这里布置了两个页面全局搜素和文章大全进行跳转然后呢去index.js处创建一下主页面的子路由
下面看代码展示
import { createRouter, createWebHashHistory } from vue-router
import MainPage from ../components/GlobalPage.vue
import LoginPage from ../components/LoginPage.vue
import SearchPage from ../views/SearchPage.vue
import ArticlePage from ../views/ArticlePage.vue
const routes [{path: /,name: mainPage,component: MainPage,redirect: /main/search,children: [{path: /main/search,component: SearchPage},{path: /main/article,component: ArticlePage}]},{path: /login,name: loginPage,component: LoginPage}
]const router createRouter({history: createWebHashHistory(),routes
})export default router这里我目前添加了全局搜素和文章大全两个子页面小细节redirect: /main/search,这里我使用了一个重定向让每次进入‘/’页面的时候都会跳转到全局搜素页面处全局搜素的页面之前已经写过了那也就不用管了这里我们添加以下文章大全的页面在views文件夹下创建ArticlePage.vue文件用vue创建基本样子
templatediv idarticle文章篇/div
/templatescript
export default {}
/scriptstyle/style
先随便写一点吧主要是要能现在展现以下跳转。 目前来看就差不多了来试试能不能实现跳转。 好嘞那么现在也就实现了这一功能 好了目前主要的一些前端样子也就差不多了这一期的项目主要还是练练手就做一些最基本文章管理这些吧。
文章管理界面开发
既然写界面我觉得还是先来一手布局比较合适
来吧组件库见 这里我没想太多直接用这个朴实无华的布局吧。
先用代码写个初始布局
templatediv idarticlea-divider /a-layout styleheight: 400px;a-layout-headerHeader/a-layout-headera-divider orientationleft热点文章/a-dividera-layout-contentContent/a-layout-contenta-layout-footerFooter/a-layout-footer/a-layout/div
/templatescript
export default {}
/scriptstyle scoped
body {margin: 0;background-color: #f5f5f5;
}/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {transition: all 0.3s;
}.fade-slide-enter-from {transform: translateX(-30px);opacity: 0;
}.fade-slide-leave-to {transform: translateX(30px);opacity: 0;
}
/style 这里我加了一个带有文字的分割线
然后就是最关键的content内容区域了这里可以加上一些样式如果对自己的前端没有太自信的话直接组件库
好看一手我们先找一个滑动条 就这个了 将滚动条放入content区域之后小改一下代码调整大小适应一下屏幕大小就好看多了
templatediv idarticlea-divider /a-layout styleheight: 760pxa-layout-header classheader文章管理/a-layout-headera-divider orientationleftCetide-Net/a-dividera-layout-contenta-scrollbar classrollBarstyleheight: 673.34px; overflow: auto; margin: 10px 20pxdiv classcontentContent/div/a-scrollbar/a-layout-content/a-layout/div
/templatescript
export default {};
/scriptstyle scoped
#article {margin: 20px;
}/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {transition: all 0.3s;
}.fade-slide-enter-from {transform: translateX(-30px);opacity: 0;
}.fade-slide-leave-to {transform: translateX(30px);opacity: 0;
}
.header {font-family: Satisfy, cursive;font-size: 26px;color: rgb(93, 186, 216);padding-left: 50px;text-align: left;
}
.rollBar{}
.content {height: 2000px;width: 1424px;background-color: var(--color-primary-light-4);
}
/style 然后就是存放文章的了这里可以找找组件库的列表组件 这个组件就很奈斯分页条评论按键都有因为这里主要是文章大全所以就不用加上编辑和删除功能了不过可以加上一个评论功能 这里加一个显示神评的吧到时候把点赞数最多的评论放到让文章大全页面都能看到
修改一下代码嵌入文章大全页面. templatediv idarticlea-divider /a-layout styleheight: 760pxa-layout-header classheader文章管理/a-layout-headera-divider orientationleftCetide-Net/a-dividera-layout-contenta-scrollbar classrollBarstyleheight: 673.34px; overflow: auto; margin: 10px 20pxdiv classcontenta-listclasslist-demo-action-layout:borderedfalse:datadataSource:pagination-propspaginationPropstemplate #item{ item }a-list-item classlist-demo-item action-layoutverticaltemplate #actionsspanicon-heart /点赞 83/spanspanicon-star /收藏{{ item.index }}/spanspanicon-message /评论/span/templatetemplate #extradiv classNameimage-areaimg altarco-design :srcitem.imageSrc //div/templatea-list-item-meta:titleitem.title:descriptionitem.descriptiontemplate #avatara-avatar shapesquareimg altavatar :srcitem.avatar //a-avatar/template/a-list-item-metadiv stylewidth:100%; text-align: left; padding-left:20pxa-divider /a-comment authorSocrates contentComment body content. datetime1 hourtemplate #avatara-avatarimgaltavatarsrchttps://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp//a-avatar/template/a-comment/div/a-list-item/template/a-list/div/a-scrollbar/a-layout-content/a-layout/div
/templatescript
import { reactive } from vueconst names [Socrates, Balzac, Plato];
const avatarSrc [//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp,//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp,//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp,
];
const imageSrc [//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp,//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp,//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp,
];
const dataSource new Array(15).fill(null).map((_, index) {return {index: index,avatar: avatarSrc[index % avatarSrc.length],title: names[index % names.length],description:Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).,imageSrc: imageSrc[index % imageSrc.length],};
});export default {setup() {return {dataSource,paginationProps: reactive({defaultPageSize: 3,total: dataSource.length})}},
}
/scriptstyle scoped
#article {margin: 20px;
}/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {transition: all 0.3s;
}.fade-slide-enter-from {transform: translateX(-30px);opacity: 0;
}.fade-slide-leave-to {transform: translateX(30px);opacity: 0;
}
.header {font-family: Satisfy, cursive;font-size: 26px;color: rgb(93, 186, 216);padding-left: 50px;text-align: left;
}
.rollBar{}
.content {/* height: 2000px; */width: 1424px;
}.list-demo-action-layout .image-area {width: 183px;height: 119px;border-radius: 2px;overflow: hidden;}.list-demo-action-layout .list-demo-item {padding: 20px 0;border-bottom: 1px solid var(--color-fill-3);
}.list-demo-action-layout .image-area img {width: 100%;
}.list-demo-action-layout .arco-list-item-action .arco-icon {margin: 0 4px;
}
/style
大家一定要看懂一些组件代码才好使用后续调用后端接口使用后端数据库的时候就会用到 这一期的项目打算就先做一个文章管理页面加上用户个人中心的东西就差不多了主要还是先熟悉熟悉流程后面可以看看加上一些更好的功能也不能只是crud哈 用户个人中心界面开发
在component文件夹下面创建一个UserCentre.vue页面
先做一个雏形 然后在index.js中注册页面 { path: /user, name: userPage, component: UserPage }
然后做一个页面跳转吧这里我们回到GlobalHeader.vue全局导航栏区域
templatediv classmenu-demoa-menu modehorizontal themedark :default-selected-keys[1]a-menu-itemkey0:style{ padding: 0, marginRight: 38px }disabledclasslogodiv:style{width: 180px,height: 30px,background: var(--color-fill-3),cursor: text,}img src../assets/logo.png width180px/div/a-menu-itema-menu-item key1router-link to/main/search全局搜索/router-link/a-menu-itema-menu-item key2router-link to/main/article文章大全/router-link/a-menu-itema-menu-item key3Cloud Service/a-menu-itema-menu-item key4Cooperation/a-menu-item/a-menudiv classuser-avatarimg srchttps://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webpaltUser Avatar classavatar-image/divclassdropdownstylefont-family: Satisfy, cursive; margin-right: 20pxbutton classdropdown-buttonimg src../assets/list.png width15px //buttondiv classdropdown-contenta href#个人信息/aa href#修改密码/aa href#其他属性/aa href/#/login退出登录/a/div/div/div/div
/template
script setup/scriptstyle scoped
.logo{float: left;
}
.menu-demo {box-sizing: border-box;width: 100%;background-color: var(--color-neutral-2);
}
.user-avatar {/* position: absolute;right: 0;top: 4px; */
}.avatar-image {position: absolute;top: 10px;right: 16px;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;z-index: 10;
}.dropdown {position: absolute;top: 28px;right: 50px;display: inline-block;z-index: 1;
}.dropdown-button {background-color: #303030;color: white;padding: 5px 0px;border: none;cursor: pointer;
}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 85px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);z-index: 1;
}.dropdown-content a {color: black;padding: 8px 8px;text-decoration: none;display: block;
}.dropdown-content a:hover {background-color: #f1f1f1;
}.dropdown:hover .dropdown-content {display: block;
}
/style这里展示一下之前添加的一点点代码然后在右上角添加了一个用户头像和一个下拉栏目感觉代码写的不太好这边还是建议大家去组件库里找一些比较方便的这里我是自己写的 templatediv classmenu-demoa-menu modehorizontal themedark :default-selected-keys[1]a-menu-itemkey0:style{ padding: 0, marginRight: 38px }disabledclasslogodiv:style{width: 180px,height: 30px,background: var(--color-fill-3),cursor: text,}img src../assets/logo.png width180px //div/a-menu-itema-menu-item key1router-link to/main/search全局搜索/router-link/a-menu-itema-menu-item key2router-link to/main/article文章大全/router-link/a-menu-itema-menu-item key3Cloud Service/a-menu-itema-menu-item key4Cooperation/a-menu-item/a-menudiv classuser-avatarimgsrchttps://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webpaltUser Avatarclassavatar-image/divclassdropdownstylefont-family: Satisfy, cursive; margin-right: 20pxbutton classdropdown-buttonimg src../assets/list.png width15px //buttondiv classdropdown-contentrouter-link to/user个人信息/router-linkrouter-link to/login修改密码/router-linkrouter-link to/login其他属性/router-linkrouter-link to/login退出登录/router-link/div/div/div/div
/template
script setup
/scriptstyle scoped
.logo {float: left;
}
.menu-demo {box-sizing: border-box;width: 100%;background-color: var(--color-neutral-2);
}
.user-avatar {/* position: absolute;right: 0;top: 4px; */
}.avatar-image {position: absolute;top: 10px;right: 16px;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;z-index: 10;
}.dropdown {position: absolute;top: 28px;right: 50px;display: inline-block;z-index: 1;
}.dropdown-button {background-color: #303030;color: white;padding: 5px 0px;border: none;cursor: pointer;
}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 85px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);z-index: 1;
}.dropdown-content a {color: black;padding: 8px 8px;text-decoration: none;display: block;
}.dropdown-content a:hover {background-color: #f1f1f1;
}.dropdown:hover .dropdown-content {display: block;
}
/style那么这样就可以点击个人中心进行跳转到个人中心了这里的退出登录bug很大应该要调用专门的函数去除登录状态什么的之后有机会再改一下 这里刚开始就是这样了老样子做个布局吧。 就用这个了
templatediv iduserCentera-layout styleheight: 100vha-layout-headerHeader/a-layout-headera-layout stylemargin: 24px 120pxa-layout-siderSider/a-layout-sidera-layout-contentContent/a-layout-content/a-layouta-layout-footerFooter/a-layout-footer/a-layout/div
/templatescript
export default {};
/scriptstyle
/style 稍微搭建一下用户界面吧明天继续hhhemmm还以为今天能写完这部分的
发一下代码吧感觉这个代码后面要大改。。
templatediv iduserCentera-layout styleheight: 100vha-layout-headerdiv classheaderdiv classpersonal-introducespan classname我是小丑/spanspan classsex-icon/spanspan classlevel-icon/span/divdiv classprofessional演员代表作:/div/div/a-layout-headera-layout stylemargin: 24px 120pxa-layout-siderSider/a-layout-sidera-layout-contentContent/a-layout-content/a-layouta-layout-footerFooter/a-layout-footer/a-layout/div
/templatescript
export default {};
/scriptstyle langscss scoped
#userCenter {background: url(../assets/image.png) no-repeat bottom center / 100%100%;
}
.header {height: 20vh;margin-top: 5%;background: url(../assets/back.png) no-repeat center / 90%100%;
}.personal-introduce {display: flex;justify-content: center;align-items: flex-end;margin-top: 10px;text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.31);.name {line-height: 29px;font-size: 22px;}.sex-icon {display: inline-block;width: 16px;height: 16px;margin: 0px 8px;margin-bottom: 4px;background: url(../assets/user-images/sex-icon.png) no-repeat center;background-size: contain;}.level-icon {display: inline-block;width: 16px;height: 16px;margin-bottom: 4px;background: url(../assets/user-images/leval-icon.png) no-repeat center;background-size: contain;}}
/style
