【update】-项目颜色的调整；之前遗留问题的开发

src/views/screen/HomePage.vue

@@ -1,31 +1,62 @@
 <template>
   <div class="screen-home-page">
+    <div class="location-icon">
+      <a-dropdown overlayClassName="screen-dropdown-box">
+        <img src="../../assets/screen/location_icon.png" alt="">
+        <template #overlay>
+          <a-menu>
+            <a-menu-item
+              v-for="item in menuData"
+              :key="item.value"
+            >
+              <a :href="'#' + item.href">{{ item.name }}</a>
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+
+    </div>
     <!-- 上面的头部-->
     <div class="header">
-      <img src="../../assets/screen/header_bg.png" alt="">
-      <span class="title">中国汽车标准化研究院运营管理</span>
+      <img class="bg-img" src="../../assets/screen/header_bg.png" alt="">
+<!--      <span class="title">中国汽车标准化研究院运营管理平台</span>-->
+      <span class="title"><img class="title" src="../../assets/screen/title_box.png" alt=""></span>
+<!--      <img class="title" src="../../assets/screen/title_box.png" alt="">-->
+<!--      <span></span>-->
     </div>
     <!-- 来款-->
     <template>
-      <div class="sub-title"><span>汽车标准化工作平台</span></div>
+      <div class="sub-title" id="income">
+<!--        <span>汽车标准化工作平台</span>-->
+        <img src="../../assets/screen/title_income.png" alt="">
+      </div>
       <income-payment-screen></income-payment-screen>
     </template>
 
     <!-- 制修订 -->
     <template>
-      <div class="sub-title"><span>汽车标准制修订管理系统 </span></div>
+      <div class="sub-title" id="preparationRevisionScreen">
+<!--        <span>汽车标准制修订管理系统 </span>-->
+        <img src="../../assets/screen/title_zxd.png" alt="">
+      </div>
       <preparation-revision-screen></preparation-revision-screen>
     </template>
 
     <!-- 中国汽车国际法规工作平台-ISO-->
     <template>
-      <div class="sub-title"><span>中国汽车国际标准工作平台-ISO</span></div>
+      <div class="sub-title" id="ISO">
+<!--        <span>中国汽车国际标准工作平台-ISO</span>-->
+        <img src="../../assets/screen/title_iso.png" alt="">
+      </div>
       <i-s-o-screen></i-s-o-screen>
     </template>
 
     <!-- 中国汽车国际法规工作平台-WP.29  -->
     <template>
-      <div class="sub-title"><span>中国汽车国际法规工作平台-WP.29</span></div>
+      <div class="sub-title" id="WP">
+<!--        <span>中国汽车国际法规工作平台-WP.29</span>-->
+        <img src="../../assets/screen/title_wp.png" alt="">
+      </div>
       <w-p-screen></w-p-screen>
     </template>
   </div>
@@ -46,10 +77,26 @@ export default {
     WPScreen,
     ISOScreen
   },
+  data() {
+    return {
+      menuData: [
+        {name: '汽车标准化工作平台', value: '1', href: 'income'},
+        {name: '汽车标准制修订管理系统', value: '2', href: 'preparationRevisionScreen'},
+        {name: '中国汽车国际标准工作平台-ISO', value: '3', href: 'ISO'},
+        {name: '中国汽车国际法规工作平台-WP.29', value: '4', href: 'WP'},
+      ]
+    }
+  },
+  created() {
+    document.title = `中国汽车标准化研究院运营管理平台`
+  }
 }
 </script>
 
 <style scoped lang="less">
+::selection{
+  background: transparent;
+}
 .screen-home-page{
   min-height: 100%;
   background: url("../../assets/screen/screen_bg.png");
@@ -69,13 +116,22 @@ export default {
   height: 162px;
   display: flex;
   justify-content: center;
-  img{
+  img.bg-img{
     position: absolute;
     top: 0;
     left: 0;
     height: 162px;
     width: 100%;
   }
+
+  img.title{
+    display: inline-block;
+    height: 64px;
+    width: auto;
+    //margin-top: 21px;
+    //line-height: 42px;
+    position: relative;
+  }
   span.title{
     display: inline-block;
     margin-top: 21px;
@@ -141,4 +197,53 @@ export default {
   }
 }
 
+/*内部标题*/
+/deep/.box-title{
+  text-shadow: 0 0 5px #88D8FB;
+}
+
+/* 右侧定位的按钮*/
+.location-icon{
+  position: fixed;
+  z-index: 200;
+  top: 165px;
+  right: 20px;
+  cursor: pointer;
+  img{
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+  }
+}
+
+::v-deep ::-webkit-scrollbar-track{
+  background: yellow;
+  //border-color: transparent;
+}
+::v-deep ::-webkit-scrollbar-thumb{
+  background: red;
+}
+::v-deep ::-webkit-scrollbar-corner {
+  background: black;
+}
+
+</style>
+
+<style lang="less">
+.screen-dropdown-box ul{
+  background: #233062;
+  color: #fff;
+  box-shadow: 0 0 4px #7599E8 inset;
+  li a{
+    color: #fff;
+  }
+  .ant-dropdown-menu-item:hover{
+    background-color: #7599E8;
+  }
+}
+
+.ant-select-screen .ant-empty-description{
+  color: #fff;
+}
+
 </style>