|
|
@@ -3,7 +3,7 @@
|
|
|
<!-- <search></search>-->
|
|
|
<el-row>
|
|
|
<el-col :span="6" :offset="14">
|
|
|
- <div class="avatar-wrapper navbar">
|
|
|
+ <div class="avatar-wrapper navbar" @click="systemSetup = true">
|
|
|
<el-avatar
|
|
|
v-if="this.avatar"
|
|
|
class="user-avatar"
|
|
|
@@ -41,14 +41,128 @@
|
|
|
></svg-icon>
|
|
|
<span style="width: 50px; margin-left: 5px">查看者</span>
|
|
|
</div>
|
|
|
- <div class="logout-btn">
|
|
|
- <el-button @click.native="logout" class="logout">
|
|
|
- <svg-icon icon-class="logout" /> 登出
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
+<!-- <div class="logout-btn">-->
|
|
|
+<!-- <el-button @click.native="logout" class="logout">-->
|
|
|
+<!-- <svg-icon icon-class="logout" /> 登出-->
|
|
|
+<!-- </el-button>-->
|
|
|
+<!-- </div>-->
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <div class="systemSetup" v-if="systemSetup">
|
|
|
+ <div class="title">
|
|
|
+ <div class="left">
|
|
|
+ <img src="../../assets/navbar/tune.svg" alt="tune">
|
|
|
+ 管理系统
|
|
|
+ </div>
|
|
|
+ <img @click="systemSetup = false" style="cursor: pointer" src="../../assets/navbar/close.svg" alt="close">
|
|
|
+ </div>
|
|
|
+ <div class="horizontalLine"/>
|
|
|
+ <div class="item" style="margin-bottom: 28px;cursor: pointer" @click="drawerEmail = true">
|
|
|
+ <div class="left">
|
|
|
+ <img src="../../assets/navbar/alternate_email.svg" alt="alternate_email">
|
|
|
+ 邮件通知
|
|
|
+ </div>
|
|
|
+ <img src="../../assets/navbar/arrow_right_alt.svg" alt="arrow_right_alt">
|
|
|
+ </div>
|
|
|
+ <div class="item" style="margin-bottom: 16px">
|
|
|
+ <div class="left">
|
|
|
+ <img src="../../assets/navbar/account_balance.svg" alt="account_balance">
|
|
|
+ 本地货币
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-select v-model="value" style="width: 100%" placeholder="请选择本地货币">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="item" @click="logout" style="margin-top: 28px;color: #EB5757;cursor: pointer">
|
|
|
+ <div class="left">
|
|
|
+ <img src="../../assets/navbar/logout.svg" alt="logout">
|
|
|
+ 退出登录
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-drawer
|
|
|
+ :visible.sync="drawerEmail"
|
|
|
+ :with-header="false">
|
|
|
+ <div class="drawerAddress-container">
|
|
|
+ <div class="drawerAddress-container-head">
|
|
|
+ <div class="drawerAddress-container-head-left">
|
|
|
+ <div class="drawerAddress-container-title">
|
|
|
+ 邮件通知
|
|
|
+ </div>
|
|
|
+ <div class="drawerAddress-container-tip">
|
|
|
+ 总计邮件: 2
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerAddress-container-head-right">
|
|
|
+ <div class="complete" @click="emailNotification">
|
|
|
+ <img src="../../assets/address/done_all.svg" alt="done_all">
|
|
|
+ 完成
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerAddress-container-main">
|
|
|
+ <div class="moduleBox">
|
|
|
+ <div class="title">
|
|
|
+ 通知模块
|
|
|
+ </div>
|
|
|
+ <div class="checkbox">
|
|
|
+ <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
|
|
+ <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="timeBox">
|
|
|
+ <div class="title">
|
|
|
+ 通知时间
|
|
|
+ </div>
|
|
|
+ <div class="input">
|
|
|
+ <el-select style="width: 100%" v-model="time" placeholder="选择通知时间">
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsTime"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="emailBox">
|
|
|
+ <div class="title">
|
|
|
+ 通知邮箱
|
|
|
+ </div>
|
|
|
+ <div class="item" v-for="(item,index) in emailArr">
|
|
|
+ <div class="title">
|
|
|
+ <div class="name">
|
|
|
+ 通知邮箱-{{index+1}}
|
|
|
+ </div>
|
|
|
+ <div class="delete" @click="emailArrDelete(index)">
|
|
|
+ <img src="../../assets/address/delete.svg" alt="delete">
|
|
|
+ 删除
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input">
|
|
|
+ <el-input v-model="item.emailName" placeholder="输入钱包地址"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addAddress" @click="emailArrPush">
|
|
|
+ <img src="../../assets/address/add_circle.svg" alt="add_circle">
|
|
|
+ 添加通知邮箱
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -59,6 +173,7 @@ import Cookies from "js-cookie";
|
|
|
import Search from './Search.vue';
|
|
|
export const baseUrl = process.env.VUE_APP_BASEURL;
|
|
|
const TokenKey = "X-UC-AuthToken";
|
|
|
+const cityOptions = ['执行记录', '执行策略', 'Gas+支出金额', '执行进度'];
|
|
|
export default {
|
|
|
components: {
|
|
|
Hamburger,
|
|
|
@@ -86,6 +201,36 @@ export default {
|
|
|
email: undefined,
|
|
|
avatar: undefined,
|
|
|
address: undefined,
|
|
|
+
|
|
|
+ systemSetup:false,
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: 'USD'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ optionsTime: [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '每天'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '每周'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ value: '',
|
|
|
+ drawerEmail:false,
|
|
|
+ emailArr:[
|
|
|
+ {emailName:'123@qq.com'},
|
|
|
+ {emailName:'234@qq.com'},
|
|
|
+ {emailName:'345@qq.com'},
|
|
|
+ ],
|
|
|
+ time:'',
|
|
|
+ checkAll: false,
|
|
|
+ checkedCities: ['执行记录', '执行策略', 'Gas+支出金额', '执行进度'],
|
|
|
+ cities: cityOptions,
|
|
|
+ isIndeterminate: true
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -115,6 +260,23 @@ export default {
|
|
|
toggleSideBar() {
|
|
|
this.$store.dispatch("app/toggleSideBar");
|
|
|
},
|
|
|
+ emailNotification(){
|
|
|
+
|
|
|
+ },
|
|
|
+ emailArrDelete(index){
|
|
|
+ this.emailArr.splice(index,1)
|
|
|
+ },
|
|
|
+ emailArrPush(){
|
|
|
+ let obj = {
|
|
|
+ emailName:''
|
|
|
+ }
|
|
|
+ this.emailArr.push(obj)
|
|
|
+ },
|
|
|
+ handleCheckedCitiesChange(value) {
|
|
|
+ let checkedCount = value.length;
|
|
|
+ this.checkAll = checkedCount === this.cities.length;
|
|
|
+ this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -125,6 +287,7 @@ export default {
|
|
|
top: 40px;
|
|
|
position: relative;
|
|
|
float: right;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
.user-avatar {
|
|
|
background: #fcff00;
|
|
|
@@ -188,4 +351,171 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+.systemSetup{
|
|
|
+ width: 360px;
|
|
|
+ height: 345px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 30px 36px;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 100;
|
|
|
+ right: 90px;
|
|
|
+ top: 100px;
|
|
|
+ border: #828282 1px solid;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .left{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:16px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .horizontalLine{
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ border-bottom: 1px solid #e0e0e0;
|
|
|
+ margin-top: 30px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.drawerAddress-container{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: auto;
|
|
|
+ .drawerAddress-container-head{
|
|
|
+ padding: 56px 40px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .drawerAddress-container-head-left{
|
|
|
+ .drawerAddress-container-title{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #181818;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .drawerAddress-container-tip{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #919191;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .drawerAddress-container-head-right{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:48px;
|
|
|
+ .cancellation{
|
|
|
+ width: 118px;
|
|
|
+ height: 52px;
|
|
|
+ background: #E0E0E0;
|
|
|
+ border-radius: 10px;
|
|
|
+ gap: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #828282;
|
|
|
+ }
|
|
|
+ .complete{
|
|
|
+ width: 118px;
|
|
|
+ height: 52px;
|
|
|
+ border: 2px solid #4A76FF;
|
|
|
+ border-radius: 10px;
|
|
|
+ gap:4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #2980FF;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .drawerAddress-container-main{
|
|
|
+ padding: 36px 40px;
|
|
|
+ background: #f9fbff;
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:20px;
|
|
|
+ .title{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #222222;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .emailBox{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .name{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+ .delete{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:4px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #EB5757;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addAddress{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:12px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #2980FF;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
million
