联系客服

sub-operation-service/src/views/ecommerce/agriculturalDetail.vue

@@ -134,12 +134,42 @@
           </div>
         </div>
 
-        <el-dialog v-model="showPhone" title="联系客服" width="400" align-center style="text-align: left">
-          <span>该号码为虚拟号码</span>
-          <div>400-059-0985-5109</div>
+        <el-dialog
+          v-model="showPhone"
+          :body-style="{ padding: 0 }"
+          :show-close="false"
+          title="联系客服"
+          width="700"
+          align-center
+          style="text-align: left"
+        >
+          <template #header>
+            <div class="titleContent">
+              <div style="display: flex; align-items: center">
+                <img :src="getAssetsFile('images/ecommerce/contact1.png')" alt="" width="60" />
+                <span style="margin-left: 10px; font-size: 24px; font-weight: bold">联系客服</span>
+              </div>
+              <div style="cursor: pointer" @click="showPhone = false">
+                <el-icon size="34"><CloseBold /></el-icon>
+              </div>
+            </div>
+          </template>
+
+          <template #default>
+            <div style="padding: 10px; text-align: center; font-size: 24px; color: #000000">
+              <span>客服热线（人工服务时间：8:00-22:00）</span>
+              <div style="margin-top: 20px">客服电话(虚拟号码)：<span style="color: #25bf82">400-059-0985-5109</span></div>
+            </div>
+          </template>
+
           <template #footer>
             <div class="dialog-footer">
-              <el-button type="danger" @click="showPhone = false">关闭</el-button>
+              <el-button
+                type="danger"
+                style="background-color: #25bf82; padding: 25px 60px; color: #ffffff; font-size: 20px; border: 0; border-radius: 16px"
+                @click="showPhone = false"
+                >确认</el-button
+              >
             </div>
           </template>
         </el-dialog>
@@ -147,7 +177,7 @@
     </common>
   </div>
 </template>
-<script setup name="ecommerce">
+<script setup>
 import common from './components/common.vue';
 import banner from './components/banner.vue';
 import { onMounted, reactive, ref, computed } from 'vue';
@@ -761,4 +791,19 @@ const toCopy = () => {};
     }
   }
 }
+.titleContent {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  background: linear-gradient(#b1ffe0 0%, #ffffff 80%);
+  border-radius: 16px;
+}
+:deep(.el-dialog) {
+  padding: 0;
+  border-radius: 16px;
+}
+.dialog-footer {
+  text-align: center;
+  padding: 40px;
+}
 </style>

sub-operation-service/src/views/farmingService/farmingConsult/policyDetail.vue

@@ -6,9 +6,9 @@
           <el-card shadow="hover" style="border-radius: 16px">
             <h1>{{ detailInfo.title }}</h1>
             <div class="subTitle" style="margin: 30px 0; font-weight: bold; font-size: 18px">
-              <span>日期： {{ detailInfo.date }}</span>
-              <span>作者：{{ detailInfo.author }}</span>
-              <span>来源： {{ detailInfo.source }}</span>
+              <span>日期： {{ detailInfo.date }}</span
+              ><span>|</span> <span>浏览量：{{ detailInfo.flow }}</span> <span>|</span> <span>来源： {{ detailInfo.source }}</span
+              ><span>|</span>
               <span class="fontSize">
                 【字号：
                 <span @click="changeSize('big')">大</span>
@@ -43,7 +43,7 @@ const detailInfo = ref({
   title: '完善强农惠农富农支持制度',
   date: '2024-02-21',
   source: '农民日报',
-  author: '汪敏',
+  flow: '4561',
   content: '',
 });
 
@@ -63,7 +63,7 @@ const changeSize = (size) => {
 <style lang="scss" scoped>
 .subTitle {
   span {
-    margin: 0 10px;
+    margin: 0 5px;
   }
 }
 .content {
@@ -82,7 +82,7 @@ const changeSize = (size) => {
 .fontSize {
   span {
     cursor: pointer;
-    margin: 0 10px;
+    margin: 0 5px;
     &:hover {
       color: #25bf82;
     }