提交 594b4509 编写于 作者: zhujiamin's avatar zhujiamin

个人中心样式调整

上级 94399679
...@@ -12,7 +12,7 @@ export const appConfig = { ...@@ -12,7 +12,7 @@ export const appConfig = {
{ {
value: "app-dark-blue-theme", value: "app-dark-blue-theme",
text: "经典蓝", text: "经典蓝",
background: "#5475ab", background: "#679BF6",
color: "#fff", color: "#fff",
}, },
{ {
......
.app-mobile-theme{ .app-mobile-theme{
.activeoption{ .activeoption{
padding: 5px; display: flex;
font-size: 12px; align-items: center;
width: 50px;
text-align: center; text-align: center;
border-radius: 2px; .activeoption-text{
font-size: 14px;
margin: 0 7px;
line-height: 14px;
}
} }
} }
......
<template> <template>
<div class="app-mobile-theme"> <div class="app-mobile-theme">
<div class="activeoption" v-if="activeoption" :style="{'background':activeoption.background,'color':activeoption.color}">{{activeoption.text}}</div> <div class="activeoption" v-if="activeoption" >
<div :style="{'background':activeoption.background,'width':'8px','height':'8px'}"></div>
<span class="activeoption-text">{{activeoption.text}}</span>
<app-mob-icon name="chevron-forward-outline" ></app-mob-icon>
</div>
<van-action-sheet get-container="#app" :title="$t('themeSelection')" :closeable="false" v-model="show" :cancel-text="$t('app.button.cancel')" close-on-click-action> <van-action-sheet get-container="#app" :title="$t('themeSelection')" :closeable="false" v-model="show" :cancel-text="$t('app.button.cancel')" close-on-click-action>
<div class = "app-mob-select-theme_theme"> <div class = "app-mob-select-theme_theme">
<div @click="themeChange(item.value)" v-for="item in options" :key="item.value" class="app-mob-select-theme_theme_item" :style="{background:item.background,color:item.color}">{{item.text}}</div> <div @click="themeChange(item.value)" v-for="item in options" :key="item.value" class="app-mob-select-theme_theme_item" :style="{background:item.background,color:item.color}">{{item.text}}</div>
......
.app-setting { .app-setting {
background: @color-main-background; background: @color-main-background;
.title-label{
font-size: 18px;
font-weight: 500;
line-height: 25px;
}
.content { .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
position: relative;
.content-list { .content-list {
margin-top: 12px; margin-top: 12px;
.content-list-item-content { ion-item{
width: 100%; border-bottom: 1px solid #E9E9E9;
height: 100%; margin: 0 15px;
padding: 0 15px; &:nth-last-child(1){
justify-content: space-between; border-bottom: none;
display: flex; }
align-items: center; .content-list-item-content {
.content-list-item-content-text { width: 100%;
font-size: 14px; height: 48px;
} display: flex;
ion-icon { justify-content: space-between;
color: #bbbbbb; align-items: center;
} .content-list-item-content-text {
.app-mobile-select { font-size: 14px;
width: 70%; color: #4E4E4E;
display: flex; font-weight: 400;
justify-content: flex-end; line-height: 20px;
} }
} ion-icon {
.content-list-item-content:active { color: #bbbbbb;
background: @color-main-background; }
.app-mobile-select {
width: 70%;
display: flex;
justify-content: flex-end;
}
}
.content-list-item-content:active {
background: @color-main-background;
}
} }
} }
.content-list-top { .content-list-top {
margin: 0; margin: 0;
} }
.content-end{
position: absolute;
height: 48px;
bottom: 0;
font-size: 14px;
font-weight: 400;
color: #4E4E4E;
}
} }
ion-item { ion-item {
--inner-padding-end: 0 !important; --inner-padding-end: 0 !important;
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
{{$t('app.button.back')}} {{$t('app.button.back')}}
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<app-mob-title><label class="title-label">个人中心</label></app-mob-title> <app-mob-title><label class="title-label">个人信息</label></app-mob-title>
</ion-toolbar> </ion-toolbar>
</app-mob-header> </app-mob-header>
<div class="content"> <div class="content">
...@@ -81,6 +81,9 @@ ...@@ -81,6 +81,9 @@
</template> </template>
</template> </template>
</ion-list> </ion-list>
<template v-for="item in data.end">
<van-button type="default" class="content-end" :key="item.name" size="large" @click="onItemClick(item)">{{item.showtext}}</van-button>
</template>
</div> </div>
</ion-page> </ion-page>
</template> </template>
...@@ -118,6 +121,7 @@ export default class AppSetting extends Vue { ...@@ -118,6 +121,7 @@ export default class AppSetting extends Vue {
top: [], top: [],
center: [], center: [],
bottom: [], bottom: [],
end:[]
}; };
/** /**
...@@ -139,6 +143,9 @@ export default class AppSetting extends Vue { ...@@ -139,6 +143,9 @@ export default class AppSetting extends Vue {
if (item.position == "bottom") { if (item.position == "bottom") {
this.data.bottom.push(item); this.data.bottom.push(item);
} }
if (item.position == "end") {
this.data.end.push(item);
}
// 多语言处理 // 多语言处理
if (item.entext) { if (item.entext) {
if (i18n.locale == "ZH-CN") { if (i18n.locale == "ZH-CN") {
......
...@@ -74,20 +74,12 @@ export const settingConfig = { ...@@ -74,20 +74,12 @@ export const settingConfig = {
viewName: "", viewName: "",
entext:'About', entext:'About',
}, },
{
name: "logout",
isEnable: true,
text: "退出登录",
position: "bottom",
sort: "100",
entext:'Sign out',
},
{ {
name: "clear", name: "clear",
isEnable: true, isEnable: true,
text: "清除缓存", text: "清除缓存",
position: "bottom", position: "bottom",
sort: "200", sort: "100",
entext:'Clear cache', entext:'Clear cache',
}, },
{ {
...@@ -98,6 +90,14 @@ export const settingConfig = { ...@@ -98,6 +90,14 @@ export const settingConfig = {
sort: "200", sort: "200",
entext:'Switch language', entext:'Switch language',
}, },
{
name: "logout",
isEnable: true,
text: "退出登录",
position: "end",
sort: "100",
entext:'Sign out',
},
], ],
// 个人中心视图(需用户手动配置) // 个人中心视图(需用户手动配置)
userCenterViewName: "", userCenterViewName: "",
......
.app-dark-blue-theme{ .app-dark-blue-theme{
@theme-color:#5475ab; @theme-color:#679BF6;
@text-color: #fff; @text-color: #fff;
.theme(@theme-color,@text-color); .theme(@theme-color,@text-color);
} }
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册