fanzhen 1023
This commit is contained in:
fanzhen123
@@ -77,7 +77,7 @@ export default {
|
||||
{ text: '数据', url: '/companyIntroduction' },
|
||||
{ text: '公司介绍', url: '/companyIntroduction' },
|
||||
{ text: '联系我们', url: '/relation' },
|
||||
{ text: '个人中心', url: 123 },
|
||||
{ text: '个人中心', url: '/personalCenter' },
|
||||
{ text: '帮助', url: 123 }
|
||||
],
|
||||
twonav: false,
|
||||
|
||||
@@ -1,12 +1,501 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="personal">
|
||||
<!-- 首页导航 -->
|
||||
<Navs></Navs>
|
||||
<div class="cont">
|
||||
<!-- 全局搜索 -->
|
||||
<search></search>
|
||||
<div class="cont_content">
|
||||
<div class="header">
|
||||
<div class="left">个人中心</div>
|
||||
<div class="right">
|
||||
<img :src="imgurl.pos" alt />
|
||||
<span>当前位置：</span>
|
||||
<span @click="$router.push('/')">首页</span>
|
||||
>
|
||||
<span @click="$router.push('/personalCenter')">个人中心</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div :class="{active:staticSelect==='基本设置'}" @click="clickStic('基本设置')">基本设置</div>
|
||||
<div :class="{active:staticSelect==='安全设置'}" @click="clickStic('安全设置')">安全设置</div>
|
||||
<div :class="{active:staticSelect==='我的收藏'}" @click="clickStic('我的收藏')">我的收藏</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right_title">{{staticSelect}}</div>
|
||||
<!-- 基本设置 -->
|
||||
<div class="right_cont_basic" v-if="staticSelect==='基本设置'">
|
||||
<div v-for="(item,index) in cont_basic" :key="index">
|
||||
<div>{{item.keys}}</div>
|
||||
<div>{{computedStr(item.values)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 安全设置 -->
|
||||
<div class="right_cont_fafety" v-if="staticSelect==='安全设置'">
|
||||
<div class="conty">
|
||||
<div class="zm">账号密码</div>
|
||||
<div class="updata" @click="updata">修改</div>
|
||||
</div>
|
||||
<div class="contys">
|
||||
<div>{{showPass?password:'********'}}</div>
|
||||
<img :src="showPass?imgurl.openyj:imgurl.closeyj" alt @click="staticUp" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 我的收藏 -->
|
||||
<div class="right_cont_collect" v-if="staticSelect==='我的收藏'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚信息 -->
|
||||
<FooterInfors></FooterInfors>
|
||||
<!-- 设置密码窗口 -->
|
||||
<section class="loginSty" v-if="showWinStatic">
|
||||
<div class="loginSty_wcont">
|
||||
<div class="wcont_header">
|
||||
<div>设置密码</div>
|
||||
<img :src="imgurl.deleteimg" alt @click="closeLoginWind(false)" />
|
||||
</div>
|
||||
<div class="wcont_content">
|
||||
<div>
|
||||
<img :src="imgurl.userpwds" alt />
|
||||
<input type="text" placeholder="请输入密码" v-model="userpwd" />
|
||||
</div>
|
||||
<div>
|
||||
<img :src="imgurl.userpwds" alt />
|
||||
<input type="text" placeholder="请输入确认密码" v-model="userpwdQR" />
|
||||
</div>
|
||||
<div @click="closeLoginWind(true)">确认</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 导航
|
||||
import Nav from '@/components/nav/Nav.vue'
|
||||
// 页脚信息
|
||||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||||
// 全局搜索
|
||||
import search from '@/components/search/search.vue'
|
||||
export default {
|
||||
name: 'personal'
|
||||
name: 'personal',
|
||||
components: {
|
||||
Navs: Nav,
|
||||
FooterInfors: FooterInfor,
|
||||
search: search
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
imgurl: {
|
||||
pos: require('../../../static/company/posweizhi.png'),
|
||||
openyj: require('../../../static/personalCenter/openyj.png'),
|
||||
closeyj: require('../../../static/personalCenter/closeyj.png'),
|
||||
userpwds: require('../../../static/nav/userpwds.png'),
|
||||
deleteimg: require('../../../static/nav/deleteImg.png')
|
||||
},
|
||||
// 当前左侧选中状态
|
||||
staticSelect: '基本设置',
|
||||
// 基本设置数据
|
||||
cont_basic: [
|
||||
{
|
||||
keys: '用户名称',
|
||||
values: '张三'
|
||||
},
|
||||
{
|
||||
keys: '邮箱',
|
||||
values: '1234567@163.com'
|
||||
},
|
||||
{
|
||||
keys: '所属部门',
|
||||
values: '部门'
|
||||
},
|
||||
{
|
||||
keys: '机构名称',
|
||||
values: '某某机构'
|
||||
},
|
||||
{
|
||||
keys: '机构地址',
|
||||
values: '某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某'
|
||||
}
|
||||
],
|
||||
// 密码
|
||||
password: '1234567890',
|
||||
// 密码显示状态
|
||||
showPass: false,
|
||||
// 设置密码窗口状态
|
||||
showWinStatic: false,
|
||||
userpwd: '',
|
||||
userpwdQR: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickStic (sta) {
|
||||
this.staticSelect = sta
|
||||
},
|
||||
staticUp () {
|
||||
this.showPass = !this.showPass
|
||||
},
|
||||
// 设置密码
|
||||
closeLoginWind (status) {
|
||||
if (status) {
|
||||
// 调接口上传，成功后关闭窗口
|
||||
if (this.userpwd === '') {
|
||||
alert('密码不能为空！')
|
||||
} else if (this.userpwdQR === '') {
|
||||
alert('确认密码不能为空！')
|
||||
} else if (this.userpwd !== this.userpwdQR) {
|
||||
alert('密码与确认密码不一致！')
|
||||
} else {
|
||||
// 调接口判断密码是否输入正确,改变登录状态
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
}
|
||||
} else {
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
}
|
||||
},
|
||||
// 修改
|
||||
updata () {
|
||||
this.showWinStatic = !this.showWinStatic
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算字符串
|
||||
computedStr () {
|
||||
return (str) => {
|
||||
let Strs = ''
|
||||
str.length <= 62 ? (Strs = str) : (Strs = str.slice(0, 61) + '...')
|
||||
return Strs
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// 注册窗口
|
||||
// 登陆窗口
|
||||
.loginSty {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.28);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > .loginSty_wcont {
|
||||
width: 37.5rem;
|
||||
height: 32.6875rem;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > .wcont_header {
|
||||
width: 32.8125rem;
|
||||
height: 3.875rem;
|
||||
border-bottom: 0.0625rem solid #dbdbdb;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div {
|
||||
margin-left: 1rem;
|
||||
font-size: 1.375rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > img {
|
||||
margin-right: 1rem;
|
||||
width: 1.3125rem;
|
||||
height: 1.3125rem;
|
||||
}
|
||||
& > img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .wcont_content {
|
||||
width: 30.8125rem;
|
||||
height: 26.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
& > div:nth-last-child(n + 2) {
|
||||
width: 100%;
|
||||
height: 3.25rem;
|
||||
border: 0.0625rem solid #dbdbdb;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > input {
|
||||
width: 21.625rem;
|
||||
height: 1.6rem;
|
||||
border: none;
|
||||
}
|
||||
& > input::-webkit-input-placeholder {
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 2rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #999999;
|
||||
}
|
||||
& > input::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 2rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #999999;
|
||||
}
|
||||
& > input:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 2rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #999999;
|
||||
}
|
||||
& > input:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 2rem;
|
||||
letter-spacing: 0rem;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
& > div {
|
||||
& > img {
|
||||
margin: 0 1.35625rem;
|
||||
width: 1.0625rem;
|
||||
height: 1.3125rem;
|
||||
}
|
||||
}
|
||||
& > div:nth-last-child(1) {
|
||||
width: 100%;
|
||||
height: 3.1875rem;
|
||||
background-color: #52b6e3;
|
||||
border-radius: 0.3125rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
& > div:nth-last-child(1):hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cont {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .cont_content {
|
||||
margin-bottom: 1.875rem;
|
||||
width: 84.25rem;
|
||||
border: 0.0625rem solid red;
|
||||
& > .header {
|
||||
width: 84.25rem;
|
||||
height: 4.25rem;
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
& > .left {
|
||||
// margin-left: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0.125rem;
|
||||
color: #000000;
|
||||
}
|
||||
& > .right {
|
||||
// margin-right: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #8fa3ae;
|
||||
& > img {
|
||||
width: 1rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.45rem;
|
||||
}
|
||||
& > span:nth-child(n + 3):hover {
|
||||
cursor: pointer;
|
||||
color: #52b6e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .content {
|
||||
width: 100%;
|
||||
height: 33.75rem;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > .left {
|
||||
width: 14.875rem;
|
||||
display: flex;
|
||||
height: 30.625rem;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
border: 1px solid red;
|
||||
border-right: 0.125rem solid #dbdbdb;
|
||||
& > div {
|
||||
width: 14.875rem;
|
||||
height: 2.75rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
// line-height: 22px;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > .active {
|
||||
background-color: #f5f5f5;
|
||||
border-right: 0.125rem solid #52b6e3;
|
||||
}
|
||||
& > div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .right {
|
||||
margin-left: 7.5rem;
|
||||
height: 30.625rem;
|
||||
& > .right_title {
|
||||
font-size: 2.125rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > .right_cont_basic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
& > div:nth-child(1) {
|
||||
width: 7.5rem;
|
||||
height: 4.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
border: 1px solid red;
|
||||
width: 38.75rem;
|
||||
height: 4.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .right_cont_fafety {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
& > .conty {
|
||||
width: 38.75rem;
|
||||
height: 4.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:nth-child(1) {
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #52b6e3;
|
||||
}
|
||||
& > div:nth-child(2):hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > .contys {
|
||||
width: 38.75rem;
|
||||
height: 4.375rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
& > div {
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0rem;
|
||||
color: #333333;
|
||||
}
|
||||
& > img {
|
||||
margin-left: 1.5rem;
|
||||
width: 2.875rem;
|
||||
height: 1.875rem;
|
||||
}
|
||||
& > img:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
static/personalCenter/closeyj.png
Normal file
BIN
static/personalCenter/closeyj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/personalCenter/openyj.png
Normal file
BIN
static/personalCenter/openyj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user