liu_li
/
yxk-storeroom-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

个人中心tab样式

master
xuhuajiao 3 years ago
parent
76efe998e1
commit
5e1eaf2ee5
5 changed files with 245 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/tab_left_active.png
  2. BIN
      src/assets/images/tab_right_active.png
  3. 8
      src/assets/styles/index.scss
  4. 84
      src/assets/styles/yxk-admin.scss
  5. 163
      src/views/system/user/center.vue

BIN
src/assets/images/tab_left_active.png
View File

Side by Side

After

Width: 33  |  Height: 86  |  Size: 1.3 KiB

BIN
src/assets/images/tab_right_active.png
View File

Side by Side

After

Width: 33  |  Height: 86  |  Size: 1.3 KiB

8
src/assets/styles/index.scss
View File

@ -121,6 +121,14 @@ aside {
} }
} }
ul{
margin: 0;
padding: 0;
li{
list-style: none;
}
}
//main-container全局样式 //main-container全局样式
.app-wrapper{ .app-wrapper{
background-color: $menuBg; background-color: $menuBg;

84
src/assets/styles/yxk-admin.scss
View File

@ -638,4 +638,88 @@
.el-input__prefix{ .el-input__prefix{
left: 8px; left: 8px;
}
// tab样式布局
.tab-content{
margin-top: 40px;
border-top: none;
&::before{
display: none;
}
.tab-nav{
display: flex;
justify-content: flex-start;
height: 41px;
line-height: 41px;
margin: -41px 0 30px -1px;
font-size: 16px;
font-weight: bold;
color: #359AFC;
border-bottom: 1px solid #113D72;
li{
position: relative;
padding: 0 24px;
margin: -1px 30px 0 0;
letter-spacing: 2px;
border-top: 1px solid #113D72;
cursor: pointer;
&::before,
&::after{
content: "";
position: absolute;
top: 0;
width: 33px;
height: 41px;
}
&::before{
left: -15px;
background: url(~@/assets/images/tab_left.png) no-repeat;
background-size: contain;
}
&::after{
right: -32px;
background: url(~@/assets/images/tab_right.png) no-repeat;
background-size: contain;
}
&:first-child{
border-left: 1px solid #113d72;;
&::before{
width: 17px;
height: 17px;
left: -1px;
top: -1px;
border-left: 1px solid #339cff;
border-top: 1px solid #339cff;
}
}
&.active-tab-nav{
color: #fff;
&::before{
background: url(~@/assets/images/tab_left_active.png) no-repeat;
background-size: contain;
}
&::after{
background: url(~@/assets/images/tab_right_active.png) no-repeat;
background-size: contain;
}
i{
display: block;
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #021941;
}
}
}
.tab-right-img{
display: block;
width: 93px;
margin: 4px 0 0 -14px;
background: url(~@/assets/images/tab_img.png) no-repeat;
background-size: contain;
}
}
} }

163
src/views/system/user/center.vue
View File

@ -31,10 +31,72 @@
</ul> </ul>
</div> </div>
</el-col> </el-col>
<el-col class="container-right user-info-right" :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
<el-col class="container-right tab-content" :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<el-tabs v-model="activeName" @tab-click="handleClick">
<div class="user-right-content">
<ul class="tab-nav">
<li :class="{'active-tab-nav': activeIndex == 0}" @click="handleClick(0)">用户资料<i /></li>
<li :class="{'active-tab-nav': activeIndex == 1}" @click="handleClick(1)">操作日志<i /></li>
<!-- 最右侧装饰img -->
<span class="tab-right-img" />
</ul>
<div v-if="activeIndex == 0" class="tab-item">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="65px">
<el-form-item label="昵称" prop="nickName">
<el-input v-model="form.nickName" style="width: 35%" />
<span style="color:#999;margin-left: 22px;">用户昵称不作为登录使用</span>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" style="width: 35%;" />
<span style="color: #999;margin-left: 22px;">手机号码不能重复</span>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender" style="width: 178px">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="">
<el-button :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存配置</el-button>
</el-form-item>
</el-form>
</div>
<!-- 操作日志 -->
<div v-if="activeIndex == 1" class="tab-item">
<el-table v-loading="loading" :data="data" style="width: 100%;">
<el-table-column prop="description" label="行为" />
<el-table-column prop="requestIp" label="IP" />
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
<el-table-column prop="browser" label="浏览器" />
<el-table-column prop="time" label="请求耗时" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
<el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
<el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
</template>
</el-table-column>
<el-table-column align="right">
<template slot="header">
<div style="display:inline-block;float: right;cursor: pointer" @click="init">创建日期<i class="el-icon-refresh" style="margin-left: 40px" /></div>
</template>
<template slot-scope="scope">
<span>{{ scope.row.createTime }}</span>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</div>
</div>
<!-- <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户资料" name="first"> <el-tab-pane label="用户资料" name="first">
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="small" label-width="65px"> <el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="small" label-width="65px">
<el-form-item label="昵称" prop="nickName"> <el-form-item label="昵称" prop="nickName">
@ -56,7 +118,6 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<!-- 操作日志 -->
<el-tab-pane label="操作日志" name="second"> <el-tab-pane label="操作日志" name="second">
<el-table v-loading="loading" :data="data" style="width: 100%;"> <el-table v-loading="loading" :data="data" style="width: 100%;">
<el-table-column prop="description" label="行为" /> <el-table-column prop="description" label="行为" />
@ -81,7 +142,6 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件-->
<el-pagination <el-pagination
:total="total" :total="total"
:current-page="page + 1" :current-page="page + 1"
@ -91,7 +151,7 @@
@current-change="pageChange" @current-change="pageChange"
/> />
</el-tab-pane> </el-tab-pane>
</el-tabs>
</el-tabs> -->
</el-col> </el-col>
</el-row> </el-row>
<updateEmail ref="email" :email="user.email" /> <updateEmail ref="email" :email="user.email" />
@ -128,6 +188,7 @@ export default {
return { return {
show: false, show: false,
Avatar: Avatar, Avatar: Avatar,
activeIndex: 0,
activeName: 'first', activeName: 'first',
saveLoading: false, saveLoading: false,
headers: { headers: {
@ -160,8 +221,9 @@ export default {
toggleShow() { toggleShow() {
this.show = !this.show this.show = !this.show
}, },
handleClick(tab, event) {
if (tab.name === 'second') {
handleClick(index) {
this.activeIndex = index
if (this.activeIndex === 1) {
this.init() this.init()
} }
}, },
@ -240,10 +302,91 @@ export default {
} }
} }
.user-info-right{
.el-tabs__item{
.container-left,
.container-right{
min-height: calc(100vh - 230px);
}
.tab-content{
margin-top: 40px;
border-top: none;
&::before{
display: none;
}
.tab-nav{
display: flex;
justify-content: flex-start;
height: 41px;
line-height: 41px;
margin: -41px 0 30px -1px;
font-size: 16px; font-size: 16px;
color: #fff;
font-weight: bold;
color: #359AFC;
border-bottom: 1px solid #113D72;
li{
position: relative;
padding: 0 24px;
margin: -1px 30px 0 0;
letter-spacing: 2px;
border-top: 1px solid #113D72;
cursor: pointer;
&::before,
&::after{
content: "";
position: absolute;
top: 0;
width: 33px;
height: 41px;
}
&::before{
left: -15px;
background: url(~@/assets/images/tab_left.png) no-repeat;
background-size: contain;
}
&::after{
right: -32px;
background: url(~@/assets/images/tab_right.png) no-repeat;
background-size: contain;
}
&:first-child{
border-left: 1px solid #113d72;;
&::before{
width: 17px;
height: 17px;
left: -1px;
top: -1px;
border-left: 1px solid #339cff;
border-top: 1px solid #339cff;
}
}
&.active-tab-nav{
color: #fff;
&::before{
background: url(~@/assets/images/tab_left_active.png) no-repeat;
background-size: contain;
}
&::after{
background: url(~@/assets/images/tab_right_active.png) no-repeat;
background-size: contain;
}
i{
display: block;
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #021941;
}
}
}
.tab-right-img{
display: block;
width: 93px;
margin: 4px 0 0 -14px;
background: url(~@/assets/images/tab_img.png) no-repeat;
background-size: contain;
}
} }
.el-form{ .el-form{
padding: 0 20px; padding: 0 20px;

Write Preview
Loading…
Cancel
Save