Skip to content

P
pptist
Commit ed4112a0 authored by 罗超's avatar 罗超
Browse files
Options

完成首页设计

parent 44d8cb9b
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 3 deletions
src/assets/styles/common.css
View file @ ed4112a0
......@@ -180,6 +180,14 @@ page {
.transparent-borders{
border:1px solid transparent;
}
.el-card{
border-radius: 8px !important;
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
-ms-border-radius: 8px !important;
-o-border-radius: 8px !important;
border-color: #EFEFEF !important;
}
.bg-transparent{
background: transparent !important;
}
......@@ -650,6 +658,11 @@ page {
background-color: #564bec22 !important;
border-color: #564bec !important;
}
.el-button.normal{
font-family: pingfangr;
font-size: 14px;
font-weight: bold;
}
.el-button.is-link:focus,
.el-button.is-link:hover{
color: #564becCC !important;
......@@ -664,6 +677,16 @@ page {
-ms-border-radius: 8px !important;
-o-border-radius: 8px !important;
}
.el-button--info{
color: #000 !important;
background-color: #e8eaec !important;
border-color: #e8eaec !important;
}
.el-button.el-button--info:hover{
color: #000 !important;
background-color: #d9dcdf !important;
border-color: #d9dcdf !important;
}
.full-dialog{
background-color: rgba(0,0,0,0.4);
position: fixed;
......
src/views/UserCenter/Index.vue
View file @ ed4112a0
......@@ -14,9 +14,97 @@
<div class="q-mt-xl">
<div class="user-label text-grey-8">我的权益</div>
<div class="row">
el-card
<el-card class="user-card q-mr-lg" shadow="never">
<div class="row items-center">
<div class="col">
<span class="title">行程设计</span>
<div class="text-small text-info q-mt-sm">会员可以无限制创建行程</div>
</div>
<el-button type="info" class="normal">开通会员</el-button>
</div>
<div style="font-size: 14px;" class="row items-center q-mt-lg">
<span class="text-grey-8">当前已创建：</span>
<span class="text-dark q-ml-md cursor-pointer">1个行程</span>
<IconRight :size="20"></IconRight>
<div class="col"></div>
<span class="text-grey-8">还可创建：</span>
<span class="text-dark q-ml-md">0个行程</span>
</div>
</el-card>
<el-card class="user-card" shadow="never">
<div class="row items-center">
<div class="col">
<span class="title">授权模板</span>
<div class="text-small text-info q-mt-sm">会员可以使用平台全部预设模板</div>
</div>
<!-- <el-button type="info" class="normal">开通会员</el-button> -->
</div>
<div style="font-size: 14px;" class="row items-center q-mt-lg">
<span class="text-grey-8">当前模板可用范围：</span>
<span class="text-dark q-ml-md cursor-pointer">免费模板</span>
</div>
</el-card>
</div>
</div>
<div class="q-mt-xl">
<div class="user-label text-grey-8">更多权益</div>
<div class="row">
<el-card class="user-card" shadow="never">
<div class="row items-center">
<div class="col">
<span class="title">存储空间</span>
<div class="text-small text-info q-mt-sm">会员可以使用平台全部预设模板</div>
</div>
<el-button type="info" class="normal">会员尊享10G空间</el-button>
</div>
<div style="font-size: 14px;" class="q-mt-xl">
<el-progress :percentage="50" />
</div>
</el-card>
<el-card class="user-card q-mx-lg" shadow="never">
<div class="row items-center">
<div class="col">
<span class="title">旅行资料库</span>
<div class="text-small text-info q-mt-sm">会员可以使用平台全部旅行资料库</div>
</div>
</div>
<div style="font-size: 14px;" class="q-mt-xl">
<div style="font-size: 14px;" class="row items-center q-mt-lg">
<span class="text-grey-8">当前资料库数据：</span>
<span class="text-dark q-ml-md cursor-pointer">10W+</span>
</div>
</div>
</el-card>
<el-card class="user-card col column flex-center cursor-pointer" shadow="never">
<div class="row items-center flex-center">
<div class="text-info" style="font-size: 13px;">查看更多会员特权 </div>
<IconRight :size="16" class="q-ml-md"></IconRight>
</div>
</el-card>
</div>
</div>
<div class="q-mt-xl">
<div class="user-label text-weight-bold" style="font-size: 16px;">快速管理</div>
<div class="q-mt-lg row">
<el-card class="enter-card col" shadow="never">
<div class="title">快速开票</div>
<div class="text-small q-mt-md q-mb-lg text-grey-8">开票入口及开票进度查询</div>
</el-card>
<el-card class="enter-card col q-mx-lg" shadow="never">
<div class="title">团队共享协作</div>
<div class="text-small q-mt-md q-mb-lg text-grey-8">与团队共享内容，文件规范存放，多人协同编辑</div>
</el-card>
<el-card class="enter-card col q-mx-lg" shadow="never">
<div class="title">团队成员管理</div>
<div class="text-small q-mt-md q-mb-lg text-grey-8">邀请团队成员，团队私有模板管理</div>
</el-card>
<el-card class="enter-card col q-mr-lg" shadow="never">
<div class="title">常见问题</div>
<div class="text-small q-mt-md q-mb-lg text-grey-8">帮助中心：查看常见问题及使用指南</div>
</el-card>
</div>
</div>
</template>
<script lang="ts" setup>
......@@ -34,7 +122,7 @@ const enTheme = ENT_USER_THEME
</script>
<style>
<style scoped>
.user-header {
padding: 16px 24px;
position: relative;
......@@ -61,4 +149,14 @@ const enTheme = ENT_USER_THEME
font-size: 12px;
margin-bottom: 8px;
}
.user-card {
width: 33%;
min-height: 112px;
}
.user-card .title,
.enter-card .title{
font-size: 15px;
font-weight: bold;
color: #000;
}
</style>
\ No newline at end of file
src/views/UserCenter/Layout.vue
View file @ ed4112a0
......@@ -22,7 +22,7 @@
</el-menu>
<el-button class="full-width pingfangr text-weight-bolder" @click="forwardSpace" style="font-size: 14px !important;" icon="arrow-left">返回工作台</el-button>
</div>
<el-scrollbar class="col full-height user-center-body">
<el-scrollbar class="col full-height user-center-body" wrap-style="overflow-x:unset;">
<router-view />
</el-scrollbar>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment