|
|
@@ -1,10 +1,13 @@
|
|
|
/*layout模板*/
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="lbg_color1" :class="['header',fixedHeader?'fixed-header':'']" >
|
|
|
- <router-link to="/home/myproject">
|
|
|
+ <!-- :class="['header',fixedHeader?'fixed-header':'']" -->
|
|
|
+ <div class="lbg_color1 header el-tag--primary" :class="classH2" >
|
|
|
+ <router-link to="/home/myproject" class="routerlink">
|
|
|
<div class="logo">
|
|
|
- <el-image :src="logo" fit="cover" /> </div>
|
|
|
+ <el-image :src="logo" fit="cover" />
|
|
|
+ </div>
|
|
|
+ <h2>前沿动力</h2>
|
|
|
</router-link>
|
|
|
<div
|
|
|
v-if="
|
|
|
@@ -29,8 +32,9 @@
|
|
|
<li class="text_color"><el-tooltip class="item" effect="dark" content="任务" placement="bottom"><i class="el-icon-s-fold"></i> </el-tooltip> </li>
|
|
|
<li class="text_color"><el-tooltip class="item" effect="dark" content="团队" placement="bottom"><i class="el-icon-s-custom"></i> </el-tooltip></li>
|
|
|
<!-- <li class="text_color" @click="dialogsystem=true"><i class="el-icon-s-tools"></i></li> -->
|
|
|
- <li>
|
|
|
- <el-tooltip :content="'Switch value: ' + switchvalue" placement="top">
|
|
|
+
|
|
|
+ <!-- <el-tooltip class="item" effect="dark" content="主题切换" placement="bottom"> 主题切换 </el-tooltip> -->
|
|
|
+ <!-- <el-tooltip :content="'Switch value: ' + switchvalue" placement="top">
|
|
|
<el-switch class="tableScopeSwitch"
|
|
|
@change="switchange()"
|
|
|
v-model="switchvalue"
|
|
|
@@ -41,8 +45,7 @@
|
|
|
active-value="1"
|
|
|
inactive-value="0">
|
|
|
</el-switch>
|
|
|
- </el-tooltip>
|
|
|
- </li>
|
|
|
+ </el-tooltip> -->
|
|
|
<li class="text_color">
|
|
|
<span > <i class="el-icon-question" style="padding:1px 0"></i>
|
|
|
<i style="font-size:12px;padding:5px 0" class="el-icon-arrow-down"></i>
|
|
|
@@ -50,9 +53,12 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
+ <el-menu-item index="/" >
|
|
|
+ <span class="text_color" :class="classH2" @click="clickchange()">主题切换</span>
|
|
|
+ </el-menu-item>
|
|
|
<el-menu-item index="/home/myproject" >
|
|
|
- <router-link to="/home/myproject" ><span class="text_color">控制台</span></router-link>
|
|
|
+ <router-link to="/home/myproject" ><span class="text_color" :class="classH2" >控制台</span></router-link>
|
|
|
</el-menu-item>
|
|
|
<el-menu-item background-color="background-color: rgba($color: #0158a8, $alpha: 0.1);"
|
|
|
v-if="loginStatus"
|
|
|
@@ -62,11 +68,11 @@
|
|
|
<div class="user">
|
|
|
<el-dropdown>
|
|
|
<div>
|
|
|
- <span class="login text_color" :title="name">{{ name }}</span>
|
|
|
+ <span class="login text_color" :title="name" :class="classH2" >{{ name }}</span>
|
|
|
<i class="el-icon-arrow-down" />
|
|
|
</div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item @click.native="logout"
|
|
|
+ <el-dropdown-item @click.native="logout" :class="classH2"
|
|
|
>退出登录</el-dropdown-item
|
|
|
>
|
|
|
</el-dropdown-menu>
|
|
|
@@ -75,7 +81,7 @@
|
|
|
</router-link>
|
|
|
</el-menu-item>
|
|
|
<el-menu-item v-else style=" background:none;">
|
|
|
- <p @click="toLogin" class="login text_color">登录/注册</p>
|
|
|
+ <p @click="toLogin" class="login text_color" :class="classH2" >登录/注册</p>
|
|
|
</el-menu-item>
|
|
|
</el-menu>
|
|
|
</div>
|
|
|
@@ -114,19 +120,52 @@
|
|
|
|
|
|
<!-- <span v-show="xglogo">服务热线：023-63410620</span> -->
|
|
|
</div>
|
|
|
+
|
|
|
<el-dialog
|
|
|
:visible.sync="dialogsystem"
|
|
|
- title="主题更换"
|
|
|
+ title=""
|
|
|
width="480px"
|
|
|
+ :custom-class="classH2"
|
|
|
+ :default-active="$route.path"
|
|
|
>
|
|
|
+ <div slot="title" class=dialog_header>
|
|
|
+ <span class="text-color">主题更换</span>
|
|
|
+ </div>
|
|
|
<div>
|
|
|
- <button v-for="(item,index) in itemlist" :key='index' @click="clicksel(index)">{{item.name}}</button>
|
|
|
+ <div class="mulColor">
|
|
|
+ <!-- <el-radio-group v-model="themecolor" >
|
|
|
+ <el-radio label="00a598">夜晚-00a598</el-radio>
|
|
|
+ <el-radio label="fa4f52">橙色-fa4f52</el-radio>
|
|
|
+ <el-radio label="0000ff">紫色-0000ff</el-radio>
|
|
|
+ <el-radio label="008000">草绿-008000</el-radio>
|
|
|
+ <el-radio label="00a597">蓝绿-00a597</el-radio>
|
|
|
+ <el-radio label="20a0ff">蓝色-20a0ff</el-radio>
|
|
|
+ </el-radio-group> -->
|
|
|
+ <!-- <div style="margin-top: 20px">
|
|
|
+ <el-radio-group v-model="themecolor" size="small">
|
|
|
+ <el-radio label="00a598" border>夜晚-00a598</el-radio>
|
|
|
+ <el-radio label="fa4f52" border>橙色-fa4f52</el-radio>
|
|
|
+ <el-radio label="0000ff" border>紫色-0000ff</el-radio>
|
|
|
+ <el-radio label="008000" border>草绿-008000</el-radio>
|
|
|
+ <el-radio label="00a597" border>蓝绿-00a597</el-radio>
|
|
|
+ <el-radio label="20a0ff" border>蓝色-20a0ff</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div> -->
|
|
|
+ <ul>
|
|
|
+ <li class="colortab" v-for="(item,index) in datalist" :key="index" @click="changeTgeIndex(index, item.name,item.id,item.color)"
|
|
|
+ :class="'colortab'+'-'+index"
|
|
|
+ >
|
|
|
+ {{item.name}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- <span :data-theme='theme'></span> -->
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="dialogsystem = false">关闭</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
<Login :loginShow="loginShow" @putLogin="getLogin" />
|
|
|
<Register :registerShow="registerShow" @putRegister="getRegister" />
|
|
|
<Forget :forgetShow="forgetShow" @putForget="getForget" />
|
|
|
@@ -134,6 +173,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { toggleClass } from '@/utils/index'
|
|
|
import { parseTime } from '@/utils/index'
|
|
|
import { request } from '@/utils/request'
|
|
|
import { resetRouter } from '@/router'
|
|
|
@@ -143,11 +183,11 @@ import { MenuItem } from './components'
|
|
|
// import logo from '@/assets/index/logo.png'
|
|
|
// import qylogo from '@/assets/index/qylogo.png'
|
|
|
// import count from '@/assets/index/count.png'
|
|
|
-import logo from '@/assets/hcfd_images/adilog.png'
|
|
|
+import logo from '@/assets/sourceFile/logo/qy.png'
|
|
|
+// import logo from '@/assets/hcfd_images/adilog.png'
|
|
|
import Login from '@/components/Login'
|
|
|
import Register from '@/components/Register'
|
|
|
import Forget from '@/components/Forget'
|
|
|
-import '@/styles/black.css'
|
|
|
export default {
|
|
|
name: 'Layout',
|
|
|
components: {
|
|
|
@@ -156,9 +196,52 @@ export default {
|
|
|
Login,
|
|
|
Register,
|
|
|
Forget,
|
|
|
+
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ ratingTageIndex:0,
|
|
|
+ datalist: [{
|
|
|
+ id:0,
|
|
|
+ color:"00a598",
|
|
|
+ name: '夜晚'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ color: "fa4f52",
|
|
|
+ name: '橙色'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2,
|
|
|
+ color: "0000ff",
|
|
|
+ name: '紫色'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:3,
|
|
|
+ color: "008000",
|
|
|
+ name: '草绿'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:4,
|
|
|
+ color: "00a597",
|
|
|
+ name: '蓝绿'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:5,
|
|
|
+ color:"20a0ff",
|
|
|
+ name: '蓝色'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ classH2:'custome-00a598',
|
|
|
+ themecolor: '00a598',//默认为00a598
|
|
|
+ tags: [
|
|
|
+ { name: '标签一', type: '' },
|
|
|
+ { name: '标签二', type: 'gray' },
|
|
|
+ { name: '标签三', type: 'primary' },
|
|
|
+ { name: '标签四', type: 'success' },
|
|
|
+ { name: '标签五', type: 'warning' },
|
|
|
+ { name: '标签六', type: 'danger' }
|
|
|
+ ],
|
|
|
zhucenum:false,
|
|
|
flag: false,
|
|
|
logo:logo,
|
|
|
@@ -184,8 +267,34 @@ export default {
|
|
|
],
|
|
|
num:0,
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ toggleClass(document.body, "custom-" + this.themecolor);
|
|
|
+ let curcolor = this.$store.state.themecolor;
|
|
|
+ this.classH2 = 'custome-' + curcolor;
|
|
|
+
|
|
|
+},
|
|
|
+ computed:{
|
|
|
+ themecolor:{
|
|
|
+ get(){
|
|
|
+ console.log(this.$store.state.themecolor)
|
|
|
+ console.log(this.$store.state.themecolor);
|
|
|
+ console.log(111)
|
|
|
+
|
|
|
+ return this.$store.state.themecolor;
|
|
|
+ },
|
|
|
+ set(val){
|
|
|
+ this.$store.commit('setThemeColor',val);
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
+ themecolor:{
|
|
|
+ handler(){
|
|
|
+ toggleClass(document.body, "custom-" + this.themecolor);
|
|
|
+ this.classH2='custome-' + this.themecolor;
|
|
|
+ }
|
|
|
+ },
|
|
|
$route: {
|
|
|
handler: function (route) {
|
|
|
this.redirect = route.query && route.query.redirect
|
|
|
@@ -193,15 +302,7 @@ export default {
|
|
|
immediate: true,
|
|
|
},
|
|
|
},
|
|
|
- mounted(){
|
|
|
- setTimeout(function(){
|
|
|
- if(localStorage.getItem("switchnum")==0){
|
|
|
- document.getElementById('theme').href="./styles/white.css"
|
|
|
- }else{
|
|
|
- document.getElementById('theme').href="./styles/black.css"
|
|
|
- }
|
|
|
- },100)
|
|
|
-},
|
|
|
+
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
@@ -248,6 +349,15 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
+ changeTgeIndex(index, name,id,color){
|
|
|
+ this.ratingTageIndex = index;
|
|
|
+ toggleClass(document.body, "custom-" +color);
|
|
|
+ this.classH2='custome-' + color;
|
|
|
+ console.log(this.ratingTageIndex)
|
|
|
+ },
|
|
|
+ clickchange(){
|
|
|
+ this.dialogsystem=true;
|
|
|
+ },
|
|
|
routerclik(){
|
|
|
const path=this.$route.path
|
|
|
let id= sessionStorage.getItem("id",id);
|
|
|
@@ -345,19 +455,6 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
|
|
|
- // 主题替换
|
|
|
- switchange(){
|
|
|
- console.log(this.switchvalue);
|
|
|
- if(this.switchvalue==0){
|
|
|
- localStorage.setItem("switchnum",this.switchvalue);
|
|
|
- document.getElementById('theme').href="/static/white.css"
|
|
|
- }else if(this.switchvalue==1){
|
|
|
- localStorage.setItem("switchnum",this.switchvalue);
|
|
|
- document.getElementById('theme').href="/static/black.css"
|
|
|
- }else{
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
@@ -390,9 +487,6 @@ export default {
|
|
|
.show{
|
|
|
background: $color_f;
|
|
|
|
|
|
-}
|
|
|
-.hidden{
|
|
|
-
|
|
|
}
|
|
|
.header {
|
|
|
padding: 0 20px;
|
|
|
@@ -401,11 +495,22 @@ export default {
|
|
|
min-width: 1000px;
|
|
|
//background: $color_f;
|
|
|
box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.04);
|
|
|
+ .routerlink{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
.logo {
|
|
|
- @include w_h(100px);
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-right: 10px;
|
|
|
&:hover {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+ h2{
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.count {
|
|
|
@@ -437,7 +542,6 @@ export default {
|
|
|
height: 100%;
|
|
|
border: none;
|
|
|
background:none;
|
|
|
- color: #0470cc;
|
|
|
.itemOn {
|
|
|
// color: $color_on !important;
|
|
|
// border-bottom: 2px solid $color_on !important;
|
|
|
@@ -498,6 +602,11 @@ export default {
|
|
|
left: 0 !important;
|
|
|
transform: translate(0) !important;
|
|
|
}
|
|
|
+.colorclass{
|
|
|
+ display: inline-block;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+}
|
|
|
.nav {
|
|
|
.el-dropdown {
|
|
|
color: inherit;
|
|
|
@@ -535,7 +644,7 @@ export default {
|
|
|
ul{
|
|
|
display: flex;
|
|
|
li{
|
|
|
- flex: 1;
|
|
|
+ // flex: 1;
|
|
|
padding: 5px 5px;
|
|
|
font-size: 20px;
|
|
|
cursor: pointer;
|
|
|
@@ -597,4 +706,32 @@ p{
|
|
|
.el-switch{
|
|
|
margin-top: -3px;
|
|
|
}
|
|
|
+.colortab{
|
|
|
+ padding: 20px;
|
|
|
+ color:#fff;
|
|
|
+ /* border: 1px solid #000; */
|
|
|
+ margin: 30px;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+}
|
|
|
+.colortab-0{
|
|
|
+background-color: #757070;
|
|
|
+}
|
|
|
+.colortab-1{
|
|
|
+ background-color: #fa4f52;
|
|
|
+}
|
|
|
+.colortab-2{
|
|
|
+ background-color: #8883a5;
|
|
|
+}
|
|
|
+.colortab-3{
|
|
|
+ background-color: #008000;
|
|
|
+}
|
|
|
+.colortab-4{
|
|
|
+ background-color: #00a597;
|
|
|
+}
|
|
|
+.colortab-5{
|
|
|
+ background-color: #20a0ff;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
