改变主题色

src/App.vue

@@ -10,7 +10,12 @@ export default {
   name: "app",
   data() {
     return {}
-  }
+  },
+  created() {
+    entinfo().then(res => {
+        
+    })
+  },
 };
 </script>
 

src/api/api.js

@@ -1,4 +1,4 @@
 import fetch from "./request"
 
 // 我的企业信息
-export const entinfo = data => fetch.post('/ent/myents', data);
+export const entinfo = data => fetch.post('/ent/entinfo', data);

src/assets/css/element.css

@@ -16,7 +16,6 @@
 
 .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar {
     width: 216px;
-    background: #2CB7CA;
     padding: 0 92px 0 92px;
     text-align: center;
 }
@@ -46,12 +45,13 @@
     border-radius: 5px;
     margin-top: 20px;
 }
-.el-drawer {
-    box-shadow: -8px 0px 8px rgba(0, 0, 0, 0.05);
+.el-button {
+    color: #1D1D1D;
+    border: 1px solid #E0E0E0;
 }
-.el-button:hover {
-    color: #2CB7CA!important;
-    border: 1px solid #2CB7CA!important;
+
+.el-button--primary {
+    color: #fff;
 }
 
 .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner {
@@ -68,24 +68,32 @@
     color: #2CB7CA;
     margin: 0 3px;
 }
+
 .el-pagination {
     margin-top: 20px;
     text-align: right;
     color: rgba(0, 0, 0, 0.65);
 }
+
+.el-pagination .el-pager .active + li {
+    border: 1px solid #D9D9D9;
+}
+
 .el-pagination ul li {
     width: 32px;
     height: 32px;
     line-height: 32px;
-    background: none!important;
+    background: #fff!important;
     border: 1px solid #D9D9D9;
     font-weight: normal;
     border-radius: 2px;
     padding: 0;
 }
+
 .el-pagination ul li:hover {
     color: #2CB7CA!important;
 }
+
 .el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next {
     width: 32px;
     height: 32px;
@@ -93,11 +101,47 @@
     background: none;
     border: 1px solid #D9D9D9;
 }
+
 .el-pagination.is-background .el-pager li:not(.disabled).active {
     background: #2CB7CA!important;
     border-radius: 2px;
     border-color: #2CB7CA;
 }
+
 .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
     color: #fff!important;
 }
+
+.bid_msg .el-dialog {
+    width: 380px!important;
+    height: 268px!important;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -190px;
+    margin-top: -134px!important;
+    border-radius: 6px;
+}
+.bid_msg .el-dialog .el-button {
+    padding: 9px 50px;
+    border-radius: 6px;
+}
+
+.bid_msg .el-dialog .el-button span {
+    font-size: 16px;
+}
+
+.el-dialog__title {
+    color: #1d1d1d;
+}
+
+.bid_msg .el-dialog .el-dialog__header {
+    padding: 32px 20px 0 20px;
+}
+
+.bid_msg .el-dialog .el-dialog__body {
+    text-align: center;
+    font-size: 14px;
+    line-height: 24px;
+    color: #686868;
+}

src/assets/scss/element-variables.scss

@@ -0,0 +1,8 @@
+/* 改变主题色变量 */
+$--color-primary: #2CB7CA;
+$--color-font: #1D1D1D;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/main.js

@@ -3,7 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import './assets/scss/element-variables.scss'
 import './assets/css/element.css';
 
 Vue.use(ElementUI);

src/views/bus/bidMsg.vue

@@ -1,15 +1,22 @@
 <template>
     <div class="bid_msg">
-        <h3>杭州琴月文创娱乐有限公司<span>已认证</span></h3>
+        <h3>
+            杭州琴月文创娱乐有限公司
+            <span>已认证</span>
+            <div class="btn_change">
+                <el-button plain class="btns1" :class="{c_active:change == '0'}" @click="changed(0)">企业</el-button>
+                <el-button plain class="btns2" :class="{c_active:change == '1'}" @click="changed(1)">个人</el-button>
+            </div>
+        </h3>
         <div class="filter_lis">
             <div class="high">高级筛选</div>
-            <el-button plain class="btn1">导出结果</el-button>
+            <el-button plain class="btn1" @click="exported">导出结果</el-button>
             <el-button plain class="btn1 btn2" @click="book">订阅设置</el-button>
         </div>
         <div class="list_data">
             <ul>
                 <li :key="index" v-for="(item, index) in listData">
-                    <router-link to="/">
+                    <router-link to="/" target="_blank">
                         <div class="tit">{{item.name}}</div>
                         <div class="bot">
                             <span class="spa1">{{item.area}}</span>
@@ -26,6 +33,21 @@
                 :total="1000">
             </el-pagination>
         </div>
+        <!-- 导出提示弹框 -->
+        <el-dialog
+            title="是否导出？"
+            :visible.sync="visibles"
+            :lock-scroll="false"
+            :show-close="false"
+            center>
+            <p>已选择数据 900 条</p>
+            <p>其中，重复导出数据 <i style="color:#2CB7CA">600</i> 条（不再扣除）</p>
+            <p>本次导出扣除数据量 <em style="color:#ff3a20">300</em> 条</p>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="visibles = false">确 定</el-button>
+                <el-button @click="visibles = false">取 消</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 
@@ -34,6 +56,8 @@ export default {
     data() {
         return {
             tips: false,
+            change: '0',
+            visibles: false,
             listData: [{
                 date: '13小时前',
                 name: '海市普陀区金沙江路海市普陀区金沙江路海市普陀区金沙江路海市普陀区金沙江路',
@@ -56,10 +80,16 @@ export default {
         }
     },
     methods: {
+        changed(num) {
+            this.change = num;
+        },
         book() {
             const news = this.$router.resolve({path: '/subscribe'});
             window.open(news.href,'_blank');
         },
+        exported() {
+            this.visibles = true;
+        }
     }
 }
 </script>
@@ -77,15 +107,43 @@ export default {
         font-size: 20px;
         span {
             width: 56px;
-            height: 20px;
-            line-height: 20px;
+            height: 24px;
+            line-height: 24px;
             text-align: center;
             color: #2ABED1;
             font-size: 13px;
             border: 1px solid #2ABED1;
-            border-radius: 10px;
+            border-radius: 12px;
             margin-left: 10px;
         }
+        .btn_change {
+            margin-left: 20px;
+            color: #fff;
+            .btns1 {
+                border-radius: 4px 0 0 4px;
+                padding: 4px 12px;
+                border-color: #2CB7CA;
+                color: #2CB7CA;
+            }
+            .btns2 {
+                border-radius: 0 4px 4px 0;
+                margin-left: 0;
+                padding: 4px 12px;
+                border-color: #2CB7CA;
+                border-left: none;
+                color: #2CB7CA;
+            }
+            .btns2:hover {
+                border-left: none!important;
+            }
+            .c_active {
+                background: #2CB7CA;
+                color: #fff;
+            }
+            .c_active:hover {
+                color: #fff!important;
+            }
+        }
     }
     .filter_lis {
         width: 1020px;
@@ -109,8 +167,6 @@ export default {
         .btn1 {
             padding: 6px 17px;
             font-size: 14px;
-            color: #1d1d1d;
-            border: 1px solid #E0E0E0;
             box-sizing: border-box;
             border-radius: 4px;
         }