修改样式

src/assets/base.css

@@ -19,7 +19,7 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-  font-family: 'PingFang SC';
+  font-family: '思源黑体';
 }
 
 /* semantic color variables for this project */

src/components/windows/footIndex.vue

@@ -7,11 +7,11 @@
           <el-icon size="30px" color="#1C88FE">
             <PhoneFilled />
           </el-icon>
-          <span>热线电话:89812345</span>
+          <span>热线电话：89812345</span>
           <el-icon size="30px" color="#1C88FE">
             <Message />
           </el-icon>
-          <span>电子邮箱:changchunwater@163.com</span>
+          <span>电子邮箱：changchunwater@163.com</span>
         </el-col>
       </el-col>
       <el-col :span="24" class="other">
@@ -36,7 +36,7 @@
 <script setup lang="ts"></script>
 <style scoped lang="scss">
 .foot {
-  height: 300px;
+  height: 490px;
   background-image: url('/foot1.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;

src/views/win/introduceDetail.vue

@@ -51,7 +51,7 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
+  
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false

src/views/win/introduceIndex.vue

@@ -61,7 +61,7 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
+  
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false

src/views/win/introduceParts/combriefIndex.vue

@@ -23,7 +23,7 @@
           <!-- <el-col :span="24" class="brief" v-html="info.txt"> </el-col> -->
           <el-col :span="24" class="brief">{{ getContent(info.txt) }} </el-col>
           <el-col :span="24" class="btns">
-            <el-button type="primary" size="default" @click="toOpen()">查看详情</el-button>
+            <el-button type="primary" size="large" @click="toOpen()">查看详情</el-button>
           </el-col>
         </el-col>
       </el-col>
@@ -92,9 +92,7 @@ const init = async () => {
 const toOpen = () => {
   const channel_id = get(info, 'value.channel_id', get(info, 'id'))
   if (!channel_id) return
-  window.open(
-    `/introduceDetail?channel_id=${channel_id}&type=gsjs`,
-  )
+  window.open(`/introduceDetail?channel_id=${channel_id}&type=gsjs`)
 }
 </script>
 <style scoped lang="scss">
@@ -115,8 +113,8 @@ const toOpen = () => {
 
     .info1 {
       height: 600px;
-      background-color: #ffffff;
-      border-radius: 5px;
+      border-radius: 20px;
+      background: rgba(255, 255, 255, 0.8);
       padding: 70px 0;
       display: flex;
 
@@ -196,6 +194,19 @@ const toOpen = () => {
             vertical-align: middle;
           }
         }
+        :deep(.el-button) {
+          border-radius: 4px;
+          background: rgb(28, 136, 254);
+          span {
+            color: rgb(255, 255, 255);
+            font-family: 思源黑体;
+            font-size: 18px;
+            font-weight: 700;
+            line-height: 32px;
+            letter-spacing: 2px;
+            text-align: left;
+          }
+        }
       }
     }
   }

src/views/win/introduceParts/gsjsDetail.vue

@@ -126,6 +126,7 @@ onMounted(() => {
       .tabActiveList {
         color: rgb(25, 25, 26);
         border-bottom: 4px solid rgb(21, 134, 255);
+        padding: 0 0 10px 0;
       }
     }
 

src/views/win/introduceParts/scfmDetail.vue

@@ -122,6 +122,7 @@ onMounted(() => {
       .tabActiveList {
         color: rgb(25, 25, 26);
         border-bottom: 4px solid rgb(21, 134, 255);
+        padding: 0 0 10px 0;
       }
     }
 

src/views/win/inwaterDetail.vue

@@ -50,7 +50,7 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
+  
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false

src/views/win/inwaterIndex.vue

@@ -54,7 +54,7 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
+  
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false

src/views/win/inwaterParts/detail.vue

@@ -132,6 +132,7 @@ onMounted(() => {
       .tabActiveList {
         color: rgb(25, 25, 26);
         border-bottom: 4px solid rgb(21, 134, 255);
+        padding: 0 0 10px 0;
       }
     }
 

src/views/win/messDetail.vue

@@ -60,7 +60,7 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
+  
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false

src/views/win/messDetailSec.vue

@@ -41,7 +41,7 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
+  
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false

src/views/win/messIndex.vue

@@ -55,7 +55,7 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
+  
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false

src/views/win/messParts/commessIndex.vue

@@ -90,9 +90,10 @@ const toOpen = (path: string) => {
 
     .list {
       max-width: 22.3%;
-      border-radius: 5px;
-      box-shadow: 0 0 5px #cccccc;
-      background-color: #ffffff;
+      border-radius: 0px 0px 4px 4px;
+      /* 灰 */
+      box-shadow: 2px 4px 20px 0px rgba(169, 169, 169, 0.25);
+      background: rgb(255, 255, 255);
 
       .imgs {
         border-radius: 5px;

src/views/win/messParts/detail.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-row class="main animate__animated animate__backInLeft">
+  <el-row class="detail animate__animated animate__backInLeft">
     <el-col :span="24" class="info">
       <el-col :span="24" class="infoList">
         <el-row>

src/views/win/messParts/detail/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-row class="main animate__animated animate__backInLeft">
+  <el-row class="detail animate__animated animate__backInLeft">
     <el-col :span="24" class="infoList">
       <el-col
         :span="24"
@@ -82,7 +82,7 @@ const toDetail = (data: any) => {
 </script>
 <style scoped lang="scss">
 .main {
-  padding: 0 17%;
+  // padding: 0 17%;
 
   .infoList {
     .list {

src/views/win/messParts/infoDetail.vue

@@ -138,6 +138,7 @@ onMounted(() => {
       .tabActiveList {
         color: rgb(25, 25, 26);
         border-bottom: 4px solid rgb(21, 134, 255);
+        padding: 0 0 10px 0;
       }
     }
 

src/views/win/messParts/serviceDetail.vue

@@ -193,6 +193,7 @@ onMounted(() => {
       .tabActiveList {
         color: rgb(25, 25, 26);
         border-bottom: 4px solid rgb(21, 134, 255);
+        padding: 0 0 10px 0;
       }
     }
 

src/views/win/messParts/waterDetail.vue

@@ -138,6 +138,7 @@ onMounted(() => {
       .tabActiveList {
         color: rgb(25, 25, 26);
         border-bottom: 4px solid rgb(21, 134, 255);
+        padding: 0 0 10px 0;
       }
     }
 

src/views/win/newsDetail.vue

@@ -41,7 +41,7 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
+  
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false

src/views/win/newsParts/listIndex.vue

@@ -186,11 +186,12 @@ onMounted(() => {
         color: rgb(25, 25, 26);
         border-bottom: 4px solid rgb(21, 134, 255);
       }
-
       .tabActiveList {
         color: rgb(25, 25, 26);
         border-bottom: 4px solid rgb(21, 134, 255);
+        padding: 0 0 10px 0;
       }
+      
     }
 
     .infoList {

src/views/win/popularwillIndex.vue

@@ -49,7 +49,7 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
+  
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false

src/views/win/popularwillParts/formIndex.vue

@@ -22,6 +22,7 @@
               :rules="rules"
               label-width="auto"
               label-position="top"
+              size="large"
             >
               <el-form-item label="问题类型" prop="type">
                 <el-radio-group v-model="form.type" size="large">
@@ -83,8 +84,8 @@
                 />
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" @click="toSubmit">提交反馈</el-button>
-                <el-button type="primary" plain @click="toRest">清空内容</el-button>
+                <el-button type="primary" size="large" @click="toSubmit">提交反馈</el-button>
+                <el-button type="primary" size="large" plain @click="toRest">清空内容</el-button>
               </el-form-item>
             </el-form>
           </el-col>
@@ -268,7 +269,8 @@ const resetForm = () => {
 
         .formMess {
           border-radius: 10px;
-          background: rgba(238, 227, 70, 0.5);
+
+          background: rgba(218, 244, 255, 1);
           padding: 40px 70px;
         }
 

src/views/win/watersupplyIndex.vue

@@ -49,7 +49,7 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
+  
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false

src/views/win/watersupplyParts/listIndex.vue

@@ -208,6 +208,7 @@ const toDetail = (data: any) => {
       .tabActiveList {
         color: rgb(25, 25, 26);
         border-bottom: 4px solid rgb(21, 134, 255);
+        padding: 0 0 10px 0;
       }
     }
 
@@ -234,7 +235,7 @@ const toDetail = (data: any) => {
           font-weight: 500;
           line-height: 32px;
           letter-spacing: 0px;
-          text-align: left;
+          text-align: right;
         }
       }
 

src/views/winParts/conductingBusiness.vue

@@ -8,7 +8,7 @@
         <el-col :span="24" class="img">
           <el-image class="images" :src="item.url"></el-image>
         </el-col>
-        <el-col :span="24" class="title">{{ item.title }}</el-col>
+        <!-- <el-col :span="24" class="title">{{ item.title }}</el-col> -->
       </el-col>
     </el-col>
   </el-row>

src/views/winParts/introduceIndex.vue

@@ -32,9 +32,6 @@ defineOptions({ name: 'introduceIndex' })
 import { ref, onMounted } from 'vue'
 const rightIcon = ref('right.png')
 const images11 = ref('brief22.png')
-// const images1 = ref('brief2.png')
-// const images2 = ref('brief3.png')
-// const images3 = ref('brief4.png')
 const left2Data = ref(`<p>
             长春水务投资发展集团有限公司成立于2021年11月8日，经市政府批准，由原长春水务集团改组组建，专业从事水务投资、建设、运营的大型国有独资企业。注册资本30.2亿元。
           </p>
@@ -56,7 +53,7 @@ const toOpen = () => {
 .introduce {
   .info {
     width: 100%;
-    height: 50vh;
+    height: 600px;
     overflow: hidden;
     border-radius: 5px;
     background-repeat: no-repeat;

src/views/winParts/newsIndex.vue

@@ -4,10 +4,10 @@
       <dividerIndex :info="{ title: '集团新闻', enTitle: 'GROUP NEWS' }" />
     </el-col>
     <el-col :span="24" class="bottom">
-      <el-col :span="6" class="left">
+      <el-col :span="7" class="left">
         <el-image class="images" :src="leftUrl"></el-image>
       </el-col>
-      <el-col :span="18" class="right">
+      <el-col :span="17" class="right">
         <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane label="党建天地" name="first">
             <el-row class="info animate__animated animate__backInLeft">
@@ -18,14 +18,14 @@
                 :key="item"
                 @click="toDetail(item)"
               >
-                <el-col :span="6" class="imgs">
+                <el-col :span="8" class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')">
                     <template #placeholder>
                       <el-image class="images" src="zxzx.jpg" />
                     </template>
                   </el-image>
                 </el-col>
-                <el-col :span="18" class="mess">
+                <el-col :span="16" class="mess">
                   <!-- item.ext.title -->
                   <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
                   <!-- item.txt.txt -->
@@ -47,14 +47,14 @@
                 :key="item"
                 @click="toDetail(item)"
               >
-                <el-col :span="6" class="imgs">
+                <el-col :span="8" class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')">
                     <template #placeholder>
                       <el-image class="images" src="zxzx.jpg" />
                     </template>
                   </el-image>
                 </el-col>
-                <el-col :span="18" class="mess">
+                <el-col :span="16" class="mess">
                   <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
                   <!-- <el-col :span="24" class="brief" v-html="getProp(item, 'brief')"></el-col> -->
                   <el-col :span="24" class="brief">{{ getContent(getProp(item, 'brief')) }}</el-col>
@@ -72,14 +72,14 @@
                 :key="item"
                 @click="toDetail(item)"
               >
-                <el-col :span="6" class="imgs">
+                <el-col :span="8" class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')">
                     <template #placeholder>
                       <el-image class="images" src="zxzx.jpg" />
                     </template>
                   </el-image>
                 </el-col>
-                <el-col :span="18" class="mess">
+                <el-col :span="16" class="mess">
                   <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
                   <!-- <el-col :span="24" class="brief" v-html="getProp(item, 'brief')"></el-col> -->
                   <el-col :span="24" class="brief">{{ getContent(getProp(item, 'brief')) }}</el-col>
@@ -97,14 +97,14 @@
                 :key="item"
                 @click="toDetail(item)"
               >
-                <el-col :span="6" class="imgs">
+                <el-col :span="8" class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')">
                     <template #placeholder>
                       <el-image class="images" src="zxzx.jpg" />
                     </template>
                   </el-image>
                 </el-col>
-                <el-col :span="18" class="mess">
+                <el-col :span="16" class="mess">
                   <el-col :span="24" class="title textOver">{{ getProp(item, 'title') }}</el-col>
                   <!-- <el-col :span="24" class="brief" v-html="getProp(item, 'brief')"></el-col> -->
                   <el-col :span="24" class="brief">{{ getContent(getProp(item, 'brief')) }}</el-col>
@@ -209,31 +209,37 @@ const toDetail = (data: any) => {
     gap: 10px;
 
     .left {
-      height: 400px;
+      height: 568px;
 
       .images {
         width: 100%;
-        height: 400px;
+        height: 568px;
       }
     }
 
     .right {
       max-width: 74%;
-      height: 400px;
+      height: 568px;
       overflow: hidden;
       padding: 0 10px;
       background-color: #ffffff;
 
+      :deep(.el-tabs__item) {
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 29px;
+        letter-spacing: 0px;
+        text-align: left;
+      }
       .info {
-        font-family: 'PingFangSC-Regular';
         .list {
           display: flex;
-          margin: 0 0 5px 0;
+          margin: 10px 0 0 0;
 
           .imgs {
             .images {
-              width: 100%;
-              height: 106px;
+              width: 290px;
+              height: 158px;
             }
           }
 
@@ -248,6 +254,7 @@ const toDetail = (data: any) => {
               font-weight: 500;
               line-height: 29px;
               letter-spacing: 0px;
+              margin: 0 0 20px 0;
             }
 
             .brief {
@@ -286,7 +293,6 @@ const toDetail = (data: any) => {
               // font-family: '黑体';
               font-size: 16px;
               font-weight: 500;
-              line-height: 23px;
               letter-spacing: 0px;
             }
           }

src/views/winParts/notesIndex.vue

@@ -5,6 +5,7 @@
         :class="['list', item.id == active ? 'activeList' : '']"
         v-for="item in list"
         :key="item.title"
+        @mouseover="mouseOver(item)"
         @click="toChange(item)"
       >
         <el-col :span="24" class="imgs">
@@ -111,6 +112,10 @@ const toChange = (event: { id: string }) => {
     }
   }
 }
+// 类型
+const mouseOver = async (data: any) => {
+  active.value = data.id
+}
 </script>
 <style scoped lang="scss">
 .notes {
@@ -119,7 +124,7 @@ const toChange = (event: { id: string }) => {
     gap: 10px;
 
     .list {
-      width: 15%;
+      width: 16%;
       height: 260px;
       position: relative;
 

src/views/winParts/popularWill.vue

@@ -1,148 +1,154 @@
 <template>
-      <el-row class="popularWill">
-            <el-col :span="24" class="top">
-                  <dividerIndex :info="{ title: '民意征集', enTitle: 'PUBLIC OPINION COLLECTION' }" />
+  <el-row class="popularWill">
+    <el-col :span="24" class="top">
+      <dividerIndex :info="{ title: '民意征集', enTitle: 'PUBLIC OPINION COLLECTION' }" />
+    </el-col>
+    <el-col :span="24" class="bottom">
+      <el-col
+        :span="8"
+        class="list animate__animated animate__backInLeft"
+        v-for="item in list"
+        :key="item"
+      >
+        <template v-if="item.type == '1'">
+          <el-col :span="24" class="img">
+            <el-image class="images" :src="item.url"></el-image>
+          </el-col>
+          <el-col :span="24" class="info">
+            <el-col :span="24" class="title">
+              {{ item.title }}
             </el-col>
-            <el-col :span="24" class="bottom">
-                  <el-col :span="8" class="list animate__animated animate__backInLeft" v-for="item in list" :key="item">
-                        <template v-if="item.type == '1'">
-                              <el-col :span="24" class="img">
-                                    <el-image class="images" :src="item.url"></el-image>
-                              </el-col>
-                              <el-col :span="24" class="info">
-                                    <el-col :span="24" class="title">
-                                          {{ item.title }}
-                                    </el-col>
-                                    <el-col :span="24" class="brief">
-                                          {{ item.brief }}
-                                    </el-col>
-                              </el-col>
-                        </template>
-                        <template v-else-if="item.type == '2'">
-                              <el-col :span="24" class="info">
-                                    <el-col :span="24" class="title">
-                                          {{ item.title }}
-                                    </el-col>
-                                    <el-col :span="24" class="brief">
-                                          {{ item.brief }}
-                                    </el-col>
-                              </el-col>
-                              <el-col :span="24" class="img img2">
-                                    <el-image class="images" :src="item.url"></el-image>
-                              </el-col>
-                        </template>
-                        <template v-else-if="item.type == '3'">
-                              <el-col :span="24" class="img">
-                                    <el-image class="images" :src="item.url"></el-image>
-                              </el-col>
-                              <el-col :span="24" class="info">
-                                    <el-col :span="24" class="title">
-                                          {{ item.title }}
-                                    </el-col>
-                                    <el-col :span="24" class="brief">
-                                          {{ item.brief }}
-                                    </el-col>
-                              </el-col>
-                        </template>
-                  </el-col>
+            <el-col :span="24" class="brief">
+              {{ item.brief }}
             </el-col>
-      </el-row>
+          </el-col>
+        </template>
+        <template v-else-if="item.type == '2'">
+          <el-col :span="24" class="info">
+            <el-col :span="24" class="title">
+              {{ item.title }}
+            </el-col>
+            <el-col :span="24" class="brief">
+              {{ item.brief }}
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="img img2">
+            <el-image class="images" :src="item.url"></el-image>
+          </el-col>
+        </template>
+        <template v-else-if="item.type == '3'">
+          <el-col :span="24" class="img">
+            <el-image class="images" :src="item.url"></el-image>
+          </el-col>
+          <el-col :span="24" class="info">
+            <el-col :span="24" class="title">
+              {{ item.title }}
+            </el-col>
+            <el-col :span="24" class="brief">
+              {{ item.brief }}
+            </el-col>
+          </el-col>
+        </template>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
 defineOptions({ name: 'popularWill' })
 
 // 基础
-import { ref } from 'vue';
+import { ref } from 'vue'
 import dividerIndex from '../../components/windows/dividerIndex.vue'
 /* 列表 */
 const list = ref([
-      {
-            type: '1',
-            title: '热点回应',
-            brief: '供水服务政策法规是为了加强城市供水管理，发展城市供水事业，保障城市生活、生产和其他建设用水而制定的。它包括与制水、供水、排水有关的，由国家、省、地方及行业主管部门发布的法律、法规及政策。',
-            url: 'my1.png'
-      },
-      {
-            type: '2',
-            title: '服务咨询',
-            brief: '自来水是最基本的民生资源，关系到千家万户，关系到城市发展。为什么停水?水质怎么保障?这些问题受到广泛的关注。那么在自来水的生产供应过程中，都有什么您十分关切的问题呢?水务集团在此进行回应。',
-            url: 'my2.png'
-      },
-      {
-            type: '3',
-            title: '满意度调查',
-            brief: '水投集团满意度调查是为了了解客户对水投集团提供的服务的满意程度而进行的一项调查。通过该调查，我们希望收集客户对水投集团的服务质量、响应速度、沟通效果等方面的意见和反馈，以便进一步改进和优化我们的服务。',
-            url: 'my3.png'
-      }
+  {
+    type: '1',
+    title: '热点回应',
+    brief:
+      '供水服务政策法规是为了加强城市供水管理，发展城市供水事业，保障城市生活、生产和其他建设用水而制定的。它包括与制水、供水、排水有关的，由国家、省、地方及行业主管部门发布的法律、法规及政策。',
+    url: 'my1.png',
+  },
+  {
+    type: '2',
+    title: '服务咨询',
+    brief:
+      '自来水是最基本的民生资源，关系到千家万户，关系到城市发展。为什么停水?水质怎么保障?这些问题受到广泛的关注。那么在自来水的生产供应过程中，都有什么您十分关切的问题呢?水务集团在此进行回应。',
+    url: 'my2.png',
+  },
+  {
+    type: '3',
+    title: '满意度调查',
+    brief:
+      '水投集团满意度调查是为了了解客户对水投集团提供的服务的满意程度而进行的一项调查。通过该调查，我们希望收集客户对水投集团的服务质量、响应速度、沟通效果等方面的意见和反馈，以便进一步改进和优化我们的服务。',
+    url: 'my3.png',
+  },
 ])
 </script>
 <style scoped lang="scss">
 .popularWill {
-      .top {
-            text-align: center;
-            margin: 0 0 20px 0;
-      }
+  .top {
+    text-align: center;
+    margin: 0 0 20px 0;
+  }
 
-      .bottom {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: space-around;
-            gap: 10px;
+  .bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+    gap: 10px;
 
+    .list {
+      max-width: 32%;
+      border-radius: 5px;
+      /* 灰 */
+      box-shadow: 2px 4px 20px 0px rgba(169, 169, 169, 0.25);
+      background: rgb(255, 255, 255);
 
-            .list {
-                  max-width: 32%;
-                  border-radius: 5px;
-                  box-shadow: 0 0 4px #cccccc;
-                  background-color: #ffffff;
-
-                  .img {
-
-                        .images {
-                              width: 100%;
-                              height: 270px;
-                              border-radius: 5px;
-                        }
-                  }
-
-                  .img2 {
-                        position: relative;
-                        top: 5px;
-                  }
+      .img {
+        .images {
+          width: 100%;
+          height: 270px;
+          border-radius: 5px;
+        }
+      }
 
+      .img2 {
+        position: relative;
+        top: 5px;
+      }
 
-                  .info {
-                        padding: 10px;
+      .info {
+        padding: 20px;
 
-                        .title {
-                              color: rgb(25, 25, 26);
-                              // font-family: '黑体';
-                              font-size: 24px;
-                              font-weight: 500;
-                              line-height: 32px;
-                              letter-spacing: 2px;
-                              margin: 0 0 16px 0;
-                        }
+        .title {
+          color: rgb(25, 25, 26);
+          // font-family: '黑体';
+          font-size: 24px;
+          font-weight: 500;
+          line-height: 32px;
+          letter-spacing: 2px;
+          margin: 0 0 15px 0;
+        }
 
-                        .brief {
-                              color: rgb(102, 102, 102);
-                              // font-family: '黑体';
-                              font-size: 18px;
-                              font-weight: 400;
-                              line-height: 30px;
-                              letter-spacing: 0px;
+        .brief {
+          color: rgb(102, 102, 102);
+          // font-family: '黑体';
+          font-size: 18px;
+          font-weight: 400;
+          line-height: 30px;
+          letter-spacing: 0px;
 
-                              overflow: hidden;
-                              text-overflow: ellipsis;
-                              -webkit-line-clamp: 5;
-                              word-break: break-all;
-                              display: -webkit-box;
-                              -webkit-box-orient: vertical;
-                        }
-                  }
-            }
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 5;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+        }
       }
+    }
+  }
 }
 </style>

src/views/windowsIndex.vue

@@ -65,7 +65,6 @@ const isScrollingDown = ref(false)
 // 滚动事件处理函数
 const handleScroll = () => {
   const currentScrollTop = targetDiv.value.scrollTop
-  console.log(currentScrollTop)
   // 判断是否不在最上面且向下滚动
   if (currentScrollTop > 250) isScrollingDown.value = true
   else isScrollingDown.value = false