Browse Source

首页模板颜色更换(背景,边框,字体颜色)

guhongwei 5 years ago
parent
commit
c73a798f37
2 changed files with 38 additions and 27 deletions
  1. 0 1
      src/layout/layout-part/top-menu.vue
  2. 38 26
      src/views/index/index.vue

+ 0 - 1
src/layout/layout-part/top-menu.vue

@@ -120,7 +120,6 @@ export default {
 }
 /deep/.menu .el-menu.el-menu--horizontal {
   border-bottom: none;
-  background: #850000;
 }
 /deep/.el-menu--horizontal > .el-menu-item.is-active {
   color: #fff;

+ 38 - 26
src/views/index/index.vue

@@ -6,12 +6,12 @@
           <div class="w_1200">
             <el-col :span="12" class="logo">
               <img src="../../assets/1471422360-3448.png" width="600" height="100" />
-              <span class="logo_txt" :style="`background:${color}`">东北地方高校就业创业协作体</span>
-              <span class="logo_txt" :style="`background:${color}`">云就业高校联盟</span>
+              <span class="logo_txt" :style="`background:${backColor}`">东北地方高校就业创业协作体</span>
+              <span class="logo_txt" :style="`background:${backColor}`">云就业高校联盟</span>
             </el-col>
             <el-col :span="12" class="search">
               <el-col :span="3" style="float: right;"
-                ><el-button type="danger" icon="el-icon-search" :style="`background:${color}; border-color:${borderCol}`"></el-button
+                ><el-button type="danger" icon="el-icon-search" :style="`background:${backColor}; border-color:${borderCol}`"></el-button
               ></el-col>
               <el-col :span="10" style="float: right;" class="searchInput" :style="`border-color:${borderCol}`"
                 ><el-input v-model="input" placeholder="请输入内容"></el-input
@@ -32,7 +32,9 @@
               <el-col class="mainOneLeft">
                 <h3 class="pub-tit mb10">
                   <span class="tit-text j-focus-news-tab" :style="`border-color:${borderCol}`">就业新闻</span>
-                  <a href="" class="check-more has-icon" title="更多">MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i></a>
+                  <a href="" class="check-more has-icon" title="更多" :style="`color:${color}`"
+                    >MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i
+                  ></a>
                 </h3>
                 <el-col>
                   <div class="block" style="width: 460px;float: left;">
@@ -54,13 +56,14 @@
               <el-col class="mainOneRight">
                 <h3 class="pub-tit mb10">
                   <span class="tit-text j-focus-news-tab" :style="`border-color:${borderCol}`">最新公告</span>
-                  <a href="" class="check-more has-icon" title="更多">MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i></a>
+                  <a href="" class="check-more has-icon" title="更多" :style="`color:${color}`"
+                    >MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i
+                  ></a>
                 </h3>
                 <el-col :span="24">
                   <ul class="notice-list">
                     <li class="item" v-for="(tag, index) in gongList" :key="index" :type="tag.type">
-                      <span class="mark" style="width:50px;">{{ tag.date }}</span>
-                      <img class="mark_img" src="../../assets/右箭头 (1).png" />
+                      <span class="mark" style="width:50px;" :style="`background:${backColor}`">{{ tag.date }}</span>
                       <a target="_blank" href="" class="link" title="">{{ tag.title }}</a>
                     </li>
                   </ul>
@@ -101,7 +104,7 @@
                   <el-calendar v-model="value"> </el-calendar>
                 </el-col>
                 <el-col class="mainThrSideExp">
-                  <el-col class="sideExpTit" :style="`background:${color}`">
+                  <el-col class="sideExpTit" :style="`background:${backColor}`">
                     <i class="el-icon-s-custom"></i>
                     <h3>快速通道</h3>
                   </el-col>
@@ -134,7 +137,7 @@
                     </el-carousel>
                   </el-col>
                   <el-col class="mainThrSideCont">
-                    <h4 class="ii-tit">联系我们</h4>
+                    <h4 class="ii-tit" :style="`color:${color}`">联系我们</h4>
                     <p class="ii-text">联系地址:长春市朝阳区延安大街2055号</p>
                     <p class="ii-text">邮政编码:130012</p>
                     <p class="ii-text">服务热线:0431-85716395;0431-85717117</p>
@@ -145,7 +148,7 @@
                 </el-col>
               </el-col>
               <el-col class="mainThrMain">
-                <el-col class="ThrMainSch">
+                <el-col class="ThrMainSch" :style="`border-color:${borderCol}`">
                   <el-tabs type="border-card">
                     <el-tab-pane label="校内宣讲">
                       <el-row class="intraLink">
@@ -232,9 +235,11 @@
                       </el-row>
                     </el-tab-pane>
                   </el-tabs>
-                  <a href="" class="tabsMore" target="_blank" title="更多">MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i></a>
+                  <a href="" class="tabsMore" target="_blank" title="更多" :style="`color:${color}`"
+                    >MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i
+                  ></a>
                 </el-col>
-                <el-col class="ThrMainExa">
+                <el-col class="ThrMainExa" :style="`border-color:${borderCol}`">
                   <el-tabs type="border-card">
                     <el-tab-pane label="吉林省事业单位招聘">
                       <ul class="ThrMainExaUnit">
@@ -261,9 +266,11 @@
                       </ul>
                     </el-tab-pane>
                   </el-tabs>
-                  <a href="" class="tabsMore" target="_blank" title="更多">MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i></a>
+                  <a href="" class="tabsMore" target="_blank" title="更多" :style="`color:${color}`"
+                    >MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i
+                  ></a>
                 </el-col>
-                <el-col class="ThrMainGov">
+                <el-col class="ThrMainGov" :style="`border-color:${borderCol}`">
                   <el-tabs type="border-card">
                     <el-tab-pane label="事业单位">
                       <ul class="ThrMainGovIns">
@@ -357,14 +364,16 @@
                       </ul>
                     </el-tab-pane>
                   </el-tabs>
-                  <a href="" class="tabsMore" target="_blank" title="更多">MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i></a>
+                  <a href="" class="tabsMore" target="_blank" title="更多" :style="`color:${color}`"
+                    >MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i
+                  ></a>
                 </el-col>
                 <el-col class="ThrMainLogin">
                   <el-link :underline="false"><img src="../../assets/1461290712106172.png"/></el-link>
                   <el-link :underline="false"><img src="../../assets/ncss_student.jpg"/></el-link>
                   <el-link :underline="false"><img src="../../assets/ncss_company.jpg"/></el-link>
                 </el-col>
-                <el-col class="ThrMainOne">
+                <el-col class="ThrMainOne" :style="`border-color:${borderCol}`">
                   <el-tabs type="border-card">
                     <el-tab-pane label="一站式招聘信息">
                       <ul class="ThrMainOneTit">
@@ -379,17 +388,19 @@
                       </ul>
                     </el-tab-pane>
                   </el-tabs>
-                  <a href="" class="tabsMore" target="_blank" title="更多">MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i></a>
+                  <a href="" class="tabsMore" target="_blank" title="更多" :style="`color:${color}`"
+                    >MORE<i class="el-icon-video-play el-icon--right" style="color:#ccc;"></i
+                  ></a>
                 </el-col>
               </el-col>
             </el-col>
             <el-col :span="24" class="mainFour">
               <div class="friendly-link">
                 <div class="tab">
-                  <div class="tab-head">
+                  <div class="tab-head" :style="`border-color:${borderCol}`">
                     <ul class="tab-list">
                       <li class="tab-item curr">
-                        <span class="tab-text">友情链接</span>
+                        <span class="tab-text" :style="`color:${color}`">友情链接</span>
                       </li>
                     </ul>
                   </div>
@@ -496,8 +507,9 @@ export default {
     topMenu,
   },
   data: () => ({
-    color: '#ccc',
-    borderCol: '#ccc',
+    color: '#850000',
+    backColor: '#850000',
+    borderCol: '#850000',
     input: '',
     activeIndex: '1',
     value: new Date(),
@@ -973,7 +985,7 @@ img {
   width: 100%;
   height: 309px;
   margin-bottom: 20px;
-  border-top: 2px solid #850000;
+  border-top: 2px solid;
 }
 .tabsMore {
   position: absolute;
@@ -1156,7 +1168,7 @@ img {
   width: 100%;
   height: 309px;
   margin-bottom: 20px;
-  border-top: 2px solid #850000;
+  border-top: 2px solid;
 }
 
 .ThrMainExaUnit {
@@ -1214,7 +1226,7 @@ img {
   width: 100%;
   height: 309px;
   margin-bottom: 20px;
-  border-top: 2px solid #850000;
+  border-top: 2px solid;
 }
 .ThrMainGovIns {
   background-color: #fff;
@@ -1298,7 +1310,7 @@ img {
   width: 100%;
   height: 285px;
   margin-bottom: 20px;
-  border-top: 2px solid #850000;
+  border-top: 2px solid;
 }
 .ThrMainOneTit {
   background-color: #fff;
@@ -1367,7 +1379,7 @@ img {
 }
 .mainFour .tab .tab-head {
   background-color: #fbfbfb;
-  border-top: 3px solid #a90d0d;
+  border-top: 2px solid;
   border-bottom: 1px solid #ddd;
   height: 48px;
   position: relative;