ui调整

snowy-admin-web/src/views/yqyc/free-trade-zone/index.vue

@@ -21,20 +21,19 @@
       <div class="top-box">
         <div class="top-item-1">海南自由贸易便利化服务专区</div>
         <div class="top-item-2">Hainan Free Trade Special Services Zone</div>
-        <div class="top-item-3">为您提供一站式全方位的贸易服务，让您的贸易之路更加便利</div>
+        <div class="top-item-3"><img src="./img/icon-top-3.png" alt=""></div>
         <div class="search">
-          <a-input-group compact>
-          <a-select v-model:value="state.value1" style="width: 8%">
-            <a-select-option value="1">测试1</a-select-option>
-            <a-select-option value="2">测试2</a-select-option>
-          </a-select>
-          <a-input-search
-            style="width: 30%"
+          <a-input
+            style="width: 50%"
             v-model:value="state.value2"
-            placeholder="input search text"
-            enter-button
-          />
-        </a-input-group>
+            placeholder="请输入关键字进行查询"
+          >
+            <template #addonAfter>
+              <div class="search-img">
+                <img src="./img/icon-search.png" alt="">
+              </div>
+            </template>
+          </a-input>
         </div>
         <div class="top-item-4"><span>热搜词:</span> <span v-for="item,key in state.hotWord" :key=key>{{item}}</span></div>
         <div class="top-item-5">
@@ -130,31 +129,37 @@
           <div class="top-search">
             <div><img src="./img/icon-zx.png" alt=""> <span>最新资讯</span></div>
             <div>
-               <a-input-search
-                v-model:value="state.value2"
-                placeholder="请输入关键词进行搜索"
+              <a-input
                 style="width: 274px"
-              />
+                v-model:value="state.value2"
+                placeholder="请输入关键字进行查询"
+              >
+                <template #addonAfter>
+                  <div class="search-img">
+                    <img src="./img/icon-search-min.png" alt="">
+                  </div>
+                </template>
+              </a-input>
               <img src="./img/refresh.png" alt=""> 
             </div>
           </div>
           <div class="news-item">
             <div>
-               <img src="./img/icon-zx.png" alt="">
+               <img src="./img/icon-news.png" alt="">
                 <div>
                   <div class="news-item-title">我省“公民身后一件事”联办服务上线</div>
                   <div class="news-item-content"><span>时间：2023年9月23日 17:00</span> &nbsp;&nbsp;&nbsp;<span>来源：海南省人民政府网</span></div>
                 </div>
             </div>
             <div>
-               <img src="./img/icon-zx.png" alt="">
+               <img src="./img/icon-news.png" alt="">
                 <div>
                   <div class="news-item-title">我省“公民身后一件事”联办服务上线</div>
                   <div class="news-item-content"><span>时间：2023年9月23日</span> &nbsp;&nbsp;&nbsp;<span>来源：海南省人民政府网</span></div>
                 </div>
             </div>
             <div>
-               <img src="./img/icon-zx.png" alt="">
+               <img src="./img/icon-news.png" alt="">
                 <div>
                   <div class="news-item-title">我省“公民身后一件事”联办服务上线</div>
                   <div class="news-item-content"><span>时间：2023年9月23日</span> &nbsp;&nbsp;&nbsp;<span>来源：海南省人民政府网</span></div>
@@ -172,31 +177,37 @@
           <div class="top-search">
             <div><img src="./img/icon-tz.png" alt=""> <span>通知公告</span></div>
             <div>
-               <a-input-search
-                v-model:value="state.value2"
-                placeholder="请输入关键词进行搜索"
+              <a-input
                 style="width: 274px"
-              />
+                v-model:value="state.value2"
+                placeholder="请输入关键字进行查询"
+              >
+                <template #addonAfter>
+                  <div class="search-img">
+                    <img src="./img/icon-search-min.png" alt="">
+                  </div>
+                </template>
+              </a-input>
               <img src="./img/refresh.png" alt=""> 
             </div>
           </div>
           <div class="news-item">
             <div>
-               <img src="./img/icon-zx.png" alt="">
+               <img src="./img/icon-news.png" alt="">
                 <div>
                   <div class="news-item-title">我省“公民身后一件事”联办服务上线</div>
                   <div class="news-item-content"><span>时间：2023年9月23日 17:00</span> &nbsp;&nbsp;&nbsp;<span>来源：海南省人民政府网</span></div>
                 </div>
             </div>
             <div>
-               <img src="./img/icon-zx.png" alt="">
+               <img src="./img/icon-news.png" alt="">
                 <div>
                   <div class="news-item-title">我省“公民身后一件事”联办服务上线</div>
                   <div class="news-item-content"><span>时间：2023年9月23日</span> &nbsp;&nbsp;&nbsp;<span>来源：海南省人民政府网</span></div>
                 </div>
             </div>
             <div>
-               <img src="./img/icon-zx.png" alt="">
+               <img src="./img/icon-news.png" alt="">
                 <div>
                   <div class="news-item-title">我省“公民身后一件事”联办服务上线</div>
                   <div class="news-item-content"><span>时间：2023年9月23日</span> &nbsp;&nbsp;&nbsp;<span>来源：海南省人民政府网</span></div>
@@ -238,11 +249,11 @@ const state: any = reactive({
     '通知公告',
   ],
   cytjList: ['二线出岛零关税货物申报','二线出岛货物申报综合查询','二线出岛货物税单管理','二线出岛业务记账管理','零关税货物管理','企业资质备案','二线业务管理','业务联动'],
-  recommendVal: '',
+  recommendVal: null,
   tszqTabVal: '',
   yxcrjList: [
-    {title: '一线企业账册管理', child:['一线径予放行业一线径予放行业','跨境电商账册管...','企业台账管理','企业台账管理','企业台账管理','企业台账管理']},
-    {title: '一线零关税货物管理', child:['一线径予放行业一线径予放行业','跨境电商账册管...','企业台账管理']},
+    {title: '一线企业账册管理', child:['一线径予放行业务记账管理','一线非径予放行业务记账管理','跨境电商账册管理']},
+    {title: '一线零关税货物管理', child:['企业资质备案','企业台账管理','进境备案清单','一线业务管理']},
     {title: '进境报关', child:['一线径予放行业一线径予放行业','跨境电商账册管...','企业台账管理']},
     {title: '进口配额', child:['一线径予放行业一线径予放行业','跨境电商账册管...','企业台账管理']},
     {title: '一线跨境电商', child:['一线径予放行业一线径予放行业','跨境电商账册管...','企业台账管理']},
@@ -363,7 +374,7 @@ const handleAnchor = (e, l) => {
   .free-content {
     width: 100%;
     .title {
-      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+      font-family: YouSheBiaoTiHei;
       font-weight: 400;
       font-size: 40px;
       color: #303133;
@@ -380,9 +391,10 @@ const handleAnchor = (e, l) => {
       justify-content: center;
       color: #fff;
       .top-item-1 {
-        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+        font-family: YouSheBiaoTiHei;
         font-weight: 400;
         font-size: 56px;
+        color: #000;
       }
       .top-item-2 {
         font-family: PingFang SC, PingFang SC;
@@ -400,13 +412,16 @@ const handleAnchor = (e, l) => {
       .search {
         width: 100%;
         text-align: center;
-        :deep(.ant-select-selector),
-        :deep(.ant-input-search-button),
         :deep(input) {
           height: 60px;
+          border-radius: 4px 0 0 4px;
+          border-right: 0;
         }
-        :deep(.ant-select-selection-item) {
-          line-height: 55px;
+        :deep(.ant-input-group-addon) {
+           background: #fff;
+        }
+        .search-img {
+          cursor: pointer;
         }
       }
       .top-item-4 {
@@ -416,6 +431,7 @@ const handleAnchor = (e, l) => {
           margin: 0 5px;
           border-bottom: 1px solid #fff;
           cursor: pointer;
+          font-size: 14px;
         }
       }
       .top-item-5 {
@@ -434,7 +450,7 @@ const handleAnchor = (e, l) => {
           text-align: center;
           cursor: pointer;
           border-radius: 4px;
-          background: rgba(255, 225, 225, 0.5);
+          background-image: url('./img/icon-top-5.png');
           box-shadow: 0px 4px 11px 0px rgba(39,58,104,0.05);
         }
       }
@@ -448,7 +464,7 @@ const handleAnchor = (e, l) => {
         display: flex;
         flex-wrap: wrap;
         // justify-content: space-between;
-        padding: 0 24px;
+        padding: 0 50px;
         margin-top: 16px;
         span {
           font-size: 16px;
@@ -514,6 +530,7 @@ const handleAnchor = (e, l) => {
           color: #909399;
           border-radius: 8px 8px 0 0;
           cursor: pointer;
+          font-weight: bold;
         }
         .tab-active {
 
@@ -524,17 +541,17 @@ const handleAnchor = (e, l) => {
         width: 1200px;
         height: 460px;
         margin: 0 auto;
-        padding: 24px;
+        padding: 16px;
         background: #DDEEFF;
         border-radius: 8px;
         display: flex;
         flex-wrap: wrap;
-        column-gap: 15px;
+        column-gap: 12px;
         align-content: space-between;
         justify-content: flex-start;
         .card-item {
-          width: 373px;
-          height: 198px;
+          width: 380px;
+          height: 200px;
           padding: 20px 16px;
           background: #FFFFFF;
           box-shadow: 0px 4px 10px 0px rgba(40,83,247,0.05);
@@ -542,6 +559,8 @@ const handleAnchor = (e, l) => {
           .item-title {
             font-size: 18px;
             color: #606266;
+            font-weight: bold;
+            margin-bottom: 12px;
           }
           .item-content {
             display: flex;
@@ -549,6 +568,7 @@ const handleAnchor = (e, l) => {
             justify-content: space-between;
             overflow: auto;
             height: 130px;
+            cursor: pointer;
              &::-webkit-scrollbar {
               /*滚动条整体样式*/
               width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
@@ -573,6 +593,7 @@ const handleAnchor = (e, l) => {
               overflow: hidden;
               text-overflow: ellipsis;
               margin: 5px 0;
+              padding: 0 16px;
             }
           }
         }
@@ -624,6 +645,8 @@ const handleAnchor = (e, l) => {
           .item-title {
             font-size: 18px;
             color: #606266;
+            margin-bottom: 12px;
+            font-weight: bold;
           }
           .item-content {
             display: flex;
@@ -631,6 +654,7 @@ const handleAnchor = (e, l) => {
             justify-content: space-between;
             overflow: auto;
             height: 130px;
+            cursor: pointer;
             &::-webkit-scrollbar {
               /*滚动条整体样式*/
               width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
@@ -655,6 +679,7 @@ const handleAnchor = (e, l) => {
               overflow: hidden;
               text-overflow: ellipsis;
               margin: 5px 0;
+              padding: 0 16px;
             }
           }
         }
@@ -679,13 +704,19 @@ const handleAnchor = (e, l) => {
           }
           :deep(input) {
             height: 32px;
+            border-radius: 4px 0 0 4px;
+            border-right: 0;
+          }
+          :deep(.ant-input-group-addon) {
+            background: #fff;
           }
           span {
-            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+            font-family: YouSheBiaoTiHei;
             font-weight: 400;
             font-size: 26px;
             color: #303133;
             vertical-align: middle;
+            font-weight: bold;
           }
           img {
             margin-left: 10px;
@@ -714,7 +745,7 @@ const handleAnchor = (e, l) => {
             margin-right: 10px;
           }
           .news-item-title {
-            font-weight: 500;
+            font-weight: bold;
             font-size: 20px;
             color: #303133;
           }