feat(service): 更新服务页面样式

- 添加页面顶部横幅图片
- 优化搜索框样式，增加背景透明度和圆角
- 调整商品列表布局和样式
- 更新颜色方案，使用品牌色 #CA2736

src/assets/images/sunful/page-banner.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="375px" height="232px" viewBox="0 0 375 232" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <defs>
+        <linearGradient x1="48.5003886%" y1="30.8625778%" x2="46.8549703%" y2="52.8371211%" id="linearGradient-1">
+            <stop stop-color="#CA2736" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="375" height="232"></rect>
+        <linearGradient x1="50%" y1="43.5344079%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#CA2736" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="22.4308558%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#CA2736" offset="0%"></stop>
+            <stop stop-color="#CA2736" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="健康管理" transform="translate(0, -88)">
+            <g id="编组" transform="translate(0, 88)">
+                <mask id="mask-3" fill="white">
+                    <use xlink:href="#path-2" transform="translate(187.5, 116) scale(-1, 1) translate(-187.5, -116)"></use>
+                </mask>
+                <use id="蒙版" fill="url(#linearGradient-1)" opacity="0.200000003" transform="translate(187.5, 116) scale(-1, 1) translate(-187.5, -116)" xlink:href="#path-2"></use>
+                <path d="M243.973046,-24.2516713 C300.844578,-54.9301508 363.085648,-50.961006 388.086523,-16.4948831 C365.288536,-46.9345452 309.670371,-50.258883 258.833043,-22.8378724 C204.548955,6.44591359 176.272233,59.697411 195.675685,96.102731 C215.088632,132.517604 274.818221,138.292208 329.102309,109.008422 C379.93489,81.5874112 407.959988,33.1456957 395.378841,-2.79631867 C410.077418,37.21992 378.918903,91.5699773 322.052119,122.24368 C261.733828,154.780159 195.362344,148.365524 173.798733,107.909862 C152.239869,67.4589755 183.654756,8.28480735 243.973046,-24.2516713 Z M224.463343,32 C227.7087,32 230.030303,32.5064489 232,33.1548929 L230.602151,40.7894924 C229.1261,40.0605845 226.643206,39.1186842 223.031281,39.1186842 C219.1261,39.1186842 216.902248,40.9030884 216.550342,42.867353 C216.095797,45.3286002 218.085044,46.4172287 222.957967,48.372027 C229.57087,50.9090049 232.175953,54.4730801 231.173998,59.9824873 C229.99609,66.4811265 223.891496,72 212.899316,72 C209.399804,72 206.071359,71.2852917 203.783969,70.4143888 C203.080156,70.1540646 202.478983,69.8700745 202,69.5813513 L205.15738,62.401136 C207.307918,63.6080937 210.880743,64.8103183 214.73216,64.8103183 C218.901271,64.8103183 221.389052,63.1489765 221.863148,60.5646669 C222.288368,58.2028162 220.665689,56.7686664 216.139785,55.1546563 C209.908113,52.8638031 206.164223,49.2949947 207.195503,43.600994 C208.412512,36.9934919 215.084066,32 224.463343,32 Z M246.155513,32 L241.734152,57.3926388 C241.048487,61.3442033 243.654016,64.5524517 247.550488,64.5524517 C251.442232,64.5524517 255.163741,61.3442033 255.849406,57.3926388 L260.26131,32 L269,32 L264.824533,55.9875315 C263.292425,64.8258003 254.969863,72 246.250088,72 C237.530313,72 231.709248,64.8258003 233.246085,55.9875315 L237.412094,32 L246.155513,32 Z M282.149392,32 L290.964322,60.4911423 L295.854634,32 L317,32 L315.729851,39.4184484 L302.838075,39.4184484 L301.263471,48.5571167 L314.160004,48.5571167 L312.894612,55.9120342 L300.002836,55.9120342 L297.238953,72 L286.958833,72 L278.143903,43.5088577 L273.248834,72 L265,72 L271.869271,32 L282.149392,32 Z M330.147783,32 L325.73057,57.3926388 C325.044815,61.3442033 327.645957,64.5524517 331.54767,64.5524517 C335.444654,64.5524517 339.166652,61.3442033 339.847679,57.3926388 L344.264891,32 L353,32 L348.828714,55.9875315 C347.291675,64.8258003 338.972749,72 330.251828,72 C321.530908,72 315.709078,64.8258003 317.246117,55.9875315 L321.412674,32 L330.147783,32 Z M365.809045,32 L360.180468,64.3958461 L372,64.3958461 L370.68298,72 L350,72 L356.935984,32 L365.809045,32 Z M381.827586,13 L384.461556,16.2186767 L382.92987,25.1079305 L391,18.2024871 L389.955266,24.1539183 L380.791705,32 L378.157735,28.7768653 L379.689422,19.8920695 L372,26.4720788 L373.035881,20.5206476 L381.827586,13 Z M389,-16 C390.692708,-13.8912134 392.223958,-11.6555091 393.572917,-9.29288703 C394.932292,-6.93026499 396.067708,-4.4944212 397,-2 C396.026042,-4.47977685 394.890625,-6.91073919 393.53125,-9.27336123 C392.182292,-11.6359833 390.65625,-13.8668061 389,-16 Z" id="形状结合" stroke="url(#linearGradient-5)" fill="url(#linearGradient-4)" mask="url(#mask-3)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/home/home.vue

@@ -65,7 +65,7 @@ export default {
         const token = params.get('token')
         const stoken = globalThis.sessionStorage.getItem('token')
         if (token || stoken) {
-            globalThis.sessionStorage.setItem('token', token)
+            globalThis.sessionStorage.setItem('token', token || stoken)
             fetchUserInfo().then(res => {
                 const { content } = res.content
                 this.name = content.name

src/views/service/service-t.vue

@@ -1,16 +1,12 @@
 <template>
     <div id="selectPreservation">
-        <div>
+        <img :src="require('@/assets/images/sunful/page-banner.svg')" alt="">
-            <!-- <img src="@/assets/images/public/service.png" class="service_img" alt="" /> -->
+        <div class="tlf" style="position: relative; z-index: 1;">
-        </div>
-        <div class="tlf">
             <div style="padding: 13px 12px">
-                <van-search v-model="searchParams" placeholder="输入关键字" show-action @clear="handleClear">
+                <van-search v-model="searchParams" placeholder="输入服务名称" show-action @clear="handleClear"
-                    <template #left-icon>
+                    background="rgba(255, 255, 255, .67)">
-                        <!-- <img src="@/assets/images/public/search.png" style="width: 12px" alt="" /> -->
-                    </template>
                     <template #action>
-                        <div style="display: flex; align-items: center">
+                        <div style="display: flex; align-items: center;;">
                             <div class="line"></div>
                             <div slot="action" @click="onSearch('0')" class="reddish">搜索</div>
                         </div>
@@ -19,22 +15,23 @@
             </div>
         </div>
         <div class="commodity">
-            <!--// 左侧导航内容 -->
+            <!-- 左侧导航内容 -->
             <div class="leftNav">
                 <ul>
                     <li v-for="(item, index) in shopList" :key="index" :class="{ typeStyle: index === currentIndex }"
                         @click="onClickNav(index)">
-                        <span class="leftTit" :class="{ typeFontSize: index === currentIndex }">
+                        <span class="leftTit">
                             {{ singleWordMenu ? `“ ${item.menuName[0]} ”` : item.menuName }}
                         </span>
                     </li>
                 </ul>
             </div>
-            <!--// 右侧商品内容 -->
+            <!-- 右侧商品内容 -->
             <div class="rightContent">
                 <ul ref="shopContent">
                     <li class="eventList" v-for="(item, index) in shopList" :key="index">
-                        <div class="rightTtitle">{{ item.menuName }}
+                        <div class="rightTtitle">
+                            {{ item.menuName }}
                         </div>
                         <ul>
                             <li class="gather" v-for="(subItem, index) in item.children" :key="index"
@@ -60,6 +57,7 @@ import BScroll from 'better-scroll'
 import { shopList } from '@/views/service/js/mock/shop-list'
 import { fetchServiceList } from "@/api/service-list"
 import { getEcosystemByValue } from '@/assets/js/utils/ecosystem'
+import { ecosystem } from './js/status'
 
 export default {
     components: {
@@ -202,7 +200,7 @@ export default {
             // 注册进
             ecosystem.active = subItem
             ecosystem.services = item
-
+            console.warn(this.$route);
             this.$router.push({
                 name: 'service-info',
                 params: {
@@ -310,10 +308,16 @@ export default {
 
 <style lang="scss" scoped>
 #selectPreservation {
-    background: rgb(247, 249, 255);
+    // display: relative;
-
     width: 100%;
 
+    &>img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+
     // position: relative;
     .vanP {
         width: 300px;
@@ -362,17 +366,16 @@ export default {
 .tlf {
     text-align: left;
     width: 100%;
-    background-color: transparent !important;
+    background-color: transparent;
     z-index: 5;
 
     .van-search {
         padding: 0 12px;
-        border-radius: 5px;
+        border-radius: 18px;
-        border: 1px solid #e1e1e1;
     }
 
     .van-search__content {
-        background-color: #fff;
+        background-color: transparent;
         padding: 0;
     }
 
@@ -381,18 +384,18 @@ export default {
     }
 
     .line {
-        // width: 1px;
         height: 14px;
-        border: 1px solid #ff7d19;
+        border: 1px solid #FF7D19;
         opacity: 0.1;
     }
 
     .reddish {
+        line-height: 18px;
         padding: 0px 10px;
         font-family: PingFangTC, PingFangTC;
         font-weight: 500;
         font-size: 13px;
-        color: #ff7d19 !important;
+        color: #CA2736;
         text-align: left;
         font-style: normal;
     }
@@ -400,19 +403,21 @@ export default {
 
 .commodity {
     /* 最大的盒子样式 */
-    margin-top: 103px;
+    margin-top: 58px;
     display: flex;
     position: fixed;
     top: 0px;
     bottom: 0px;
     width: 100%;
-    background: #fff;
+    // background: transparent;
     overflow: hidden;
 }
 
 .leftNav {
+    border-radius: 0px 17px 8px 8px;
+    overflow: hidden;
     /* 左侧大盒子的整体样式 */
-    width: 110px;
+    width: 93px;
     background: rgb(248, 248, 248);
 }
 
@@ -422,14 +427,13 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    // border-left: 2px solid rgb(255, 94, 121);
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: PingFangSC, PingFang SC;
     font-weight: 500;
     font-size: 14px;
-    color: #ff7d19;
+    color: #CA2736;
     line-height: 32px;
 }
 
@@ -438,7 +442,7 @@ export default {
     display: block;
     width: 4px;
     height: 16px;
-    background: #ff7d19;
+    background: #CA2736;
     border-radius: 0px 2px 2px 0px;
     position: absolute;
     left: 0;
@@ -446,7 +450,7 @@ export default {
 
 .leftTit {
     /* 左侧导航标题默认样式 */
-    padding: 11px 16px;
+    padding: 9px 16px;
     display: flex;
     height: 40px;
     justify-content: center;
@@ -459,6 +463,8 @@ export default {
 }
 
 .rightContent {
+    border-radius: 0px 17px 8px 8px;
+    background: transparent;
     /* 右侧大盒子的整体样式 */
     flex: 1;
 
@@ -469,14 +475,16 @@ export default {
 
 .rightTtitle {
     /* 右侧标题样式 */
-    padding: 15px 0 0px 23px;
+    padding: 29px 0 0px 23px;
+    margin: 0;
     font-family: PingFangSC, PingFang SC;
     font-weight: 600;
     font-size: 15px;
     color: #333333;
     line-height: 32px;
-    // background: rgb(248, 248, 248);
+    text-align: left;
-    margin: 0;
+    font-style: normal;
+
 }
 
 .gather {
@@ -519,6 +527,9 @@ export default {
     color: #000000;
     line-height: 15px;
     width: 60px;
+    text-align: left;
+    font-style: normal;
+
 }
 
 .saleGood {