From f75384e9adba20d7bb67bdac314a4be3f7ba0cf9 Mon Sep 17 00:00:00 2001
From: Wangwei <870653736@qq.com>
Date: Mon, 5 Jun 2023 09:42:48 +0800
Subject: [PATCH] =?UTF-8?q?DP-1009=20=E7=94=A8=E6=88=B7=E4=BE=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer.vue | 342 ++++++++++++++++++++++++++------------
 1 file changed, 234 insertions(+), 108 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 5be5260..64e2791 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,10 @@
 <template>
-  <el-backtop></el-backtop>
+  <el-backtop class="feedback-backtop">
+    <svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="14" height="14" fill="currentColor" aria-hidden="true">
+      <path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path>
+    </svg>
+  </el-backtop>
+
   <footer class="m-dn">
     <div class="footer">
       <div class="deanfooter" id="deanfooter" style="margin-top:0">
@@ -43,47 +48,111 @@
   </div>
 
   <!-- 用户侧 -->
-  <div class="dr-feedback m-dn">
-    <div class="dr-feedback-item" @click="pageFeedbackHanlder(true)">
-      <span class="anticon anticon-edit dr-feedback-item-icon">
-        <svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true">
-          <path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path>
-        </svg>
-      </span>
-      <div>页面反馈</div>
-    </div>
-
-    <el-popover placement="left" trigger="hover" width="240px">
-      <div style="padding: 10px;">
-        <div class="dr-feedback-contract-item">
-          <div class="dr-feedback-contract-item-title">帆软社区管理员</div>
-          <a href="https://bbs.fanruan.com/thread-135379-1-1.html" target="_blank" rel="noreferrer">社区管理员联系方式一览</a>
-        </div>
-        <div class="dr-feedback-contract-item">
-          <div class="dr-feedback-contract-item-title">售前咨询电话</div>
-          <a href="tel:+400-811-8890" target="_blank" rel="noreferrer">400-811-8890 转1</a>
-        </div>
-        <div class="dr-feedback-contract-item">
-          <div class="dr-feedback-contract-item-title">在线技术支持电话</div>
-          <a href="tel:+400-811-8890" target="_blank" rel="noreferrer">400-811-8890 转2</a>
-        </div>
-        <div class="dr-feedback-contract-item">
-          <div class="dr-feedback-contract-item-title">海外客户技术支持电话</div>
-          <a href="tel:+0510-66758729" target="_blank" rel="noreferrer">(+86) 0510-66758729</a>
-        </div>
-        <div class="dr-feedback-contract-item">
-          <div class="dr-feedback-contract-item-title">总裁办24H投诉电话</div>
-          <a href="tel:+17312781526" target="_blank" rel="noreferrer">173 1278 1526</a>
+  <div class="service_feddback_box m-dn">
+    <el-popover placement="left" trigger="hover" width="392px" popper-class="new-popper">
+      <div class="tel_txt_box dr-feedback-popover-wrapper">
+        <div class="dr-feedback-popover">
+          <div class="dr-feedback-popover-item-click dr-feedback-popover-item">
+            <div class="dr-feedback-popover-item-logo">
+              <img src="https://fanruanbbs.obs.cn-east-2.myhuaweicloud.com/ui/digit-fe/feedback/support.png" />
+            </div>
+            <div>
+              <div class="dr-feedback-popover-item-title-wrapper" style="gap: 8px;">
+                <div class="ant-space-item" style="">
+                  <span class="title">在线支持</span>
+                </div>
+                <div class="ant-space-item">
+                  <span role="img" aria-label="arrow-right" class="anticon anticon-arrow-right icon">
+                    <svg viewBox="64 64 896 896" focusable="false" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
+                      <path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"></path>
+                    </svg>
+                  </span>
+                </div>
+              </div>
+              <div class="grey-text">工作日9:00-12:00，13:30-17:30在线</div>
+              <div class="dr-feedback-popover-item-info-wrapper">
+                <div>
+                  <div class="grey-text">或拨打热线电话：</div>
+                  <div>
+                    <div class="ant-space css-ph9edi ant-space-horizontal ant-space-align-center" style="gap: 8px;">
+                      <div class="ant-space-item" style="">
+                        <span class="grey-text">大陆</span>
+                      </div>
+                      <div class="ant-space-item">
+                        <div class="ant-space css-ph9edi ant-space-horizontal ant-space-align-center blue-text" style="gap: 8px;">
+                          <div class="ant-space-item">400-811-8890 转2</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <span class="grey-text">海外</span>
+                      <span class="blue-text">(+86) 0510-66758729</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="dr-feedback-popover-item-click dr-feedback-popover-item" style="cursor: pointer;" @click="pageFeedbackHanlder(true)">
+            <div class="dr-feedback-item">
+              <div class="dr-feedback-popover-item-logo">
+                <img alt="feedback" src="https://hwobs.fanruan.com/ui/digit-fe/feedback/feedback.png" />
+              </div>
+              <div>
+                <div class="dr-feedback-popover-item-title-wrapper">
+                  <span class="title">页面反馈</span>
+                  <span role="img" aria-label="arrow-right" class="anticon anticon-arrow-right icon">
+                    <svg viewBox="64 64 896 896" focusable="false" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
+                      <path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"></path>
+                    </svg>
+                  </span>
+                </div>
+                <div class="grey-text">针对当前网页的建议、问题反馈</div>
+              </div>
+            </div>
+          </div>
+          <div class="dr-feedback-popover-item">
+            <div class="dr-feedback-popover-item-logo">
+              <img src="https://hwobs.fanruan.com/ui/digit-fe/feedback/consult.png" />
+            </div>
+            <div>
+              <div class="ant-space css-ph9edi ant-space-horizontal ant-space-align-center dr-feedback-popover-item-title-wrapper" style="gap: 8px;">
+                <div class="ant-space-item">
+                  <span class="title">售前咨询</span>
+                </div>
+              </div>
+              <div class="grey-text">采购需求/获取报价/预约演示</div>
+              <div class="dr-feedback-popover-item-info-wrapper">
+                <div class="grey-text">或拨打: <span class="blue-text">400-811-8890 转1</span></div>
+              </div>
+            </div>
+            <div>
+              <img alt="qr" src="https://fanruanbbs.obs.cn-east-2.myhuaweicloud.com/ui/digit-fe/feedback/qr.png" width="80" />
+            </div>
+          </div>
+          <div class="dr-feedback-popover-item" style="margin-bottom: 0">
+            <div class="dr-feedback-popover-item-logo">
+              <img src="https://hwobs.fanruan.com/ui/digit-fe/feedback/tel.png" />
+            </div>
+            <div>
+              <div class="ant-space css-ph9edi ant-space-horizontal ant-space-align-center dr-feedback-popover-item-title-wrapper" style="gap: 8px;">
+                <div class="ant-space-item">
+                  <span class="title">总裁办24H电话</span>
+                </div>
+              </div>
+              <div class="blue-text">173 1278 1526</div>
+            </div>
+          </div>
         </div>
       </div>
       <template #reference>
-        <div class="dr-feedback-item">
-          <span role="img" aria-label="phone" class="anticon anticon-phone dr-feedback-item-icon">
-            <svg viewBox="64 64 896 896" focusable="false" data-icon="phone" width="1em" height="1em" fill="currentColor" aria-hidden="true">
-              <path d="M877.1 238.7L770.6 132.3c-13-13-30.4-20.3-48.8-20.3s-35.8 7.2-48.8 20.3L558.3 246.8c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l89.6 89.7a405.46 405.46 0 01-86.4 127.3c-36.7 36.9-79.6 66-127.2 86.6l-89.6-89.7c-13-13-30.4-20.3-48.8-20.3a68.2 68.2 0 00-48.8 20.3L132.3 673c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l106.4 106.4c22.2 22.2 52.8 34.9 84.2 34.9 6.5 0 12.8-.5 19.2-1.6 132.4-21.8 263.8-92.3 369.9-198.3C818 606 888.4 474.6 910.4 342.1c6.3-37.6-6.3-76.3-33.3-103.4zm-37.6 91.5c-19.5 117.9-82.9 235.5-178.4 331s-213 158.9-330.9 178.4c-14.8 2.5-30-2.5-40.8-13.2L184.9 721.9 295.7 611l119.8 120 .9.9 21.6-8a481.29 481.29 0 00285.7-285.8l8-21.6-120.8-120.7 110.8-110.9 104.5 104.5c10.8 10.8 15.8 26 13.3 40.8z"></path>
-            </svg>
-          </span>
-          <div>联系我们</div>
+        <div class="dr-feedback">
+          <div class="dr-feedback-inner">
+            <img class="dr-feedback-inner-icon" src="https://hwobs.fanruan.com/ui/digit-fe/feedback/customer.png" />
+            <div>获取帮助</div>
+          </div>
         </div>
       </template>
     </el-popover>
@@ -127,8 +196,6 @@ export default {
       comLoginUrl: proxy.$root.com_login_url2 + route.path,
     });
 
-    getTicketToken();
-
     onBeforeRouteUpdate((to) => {
       state.curPageUrl = proxy.$root.com_edu_url + to.fullPath;
       state.comLoginUrl = proxy.$root.com_login_url2 + to.fullPath;
@@ -203,83 +270,142 @@ export default {
 </script>
 
 <style lang="scss">
-.dia-msg-til {
-  background-color: #fefbe6;
-  padding: 10px 20px;
-  border: 1px solid #ffe58f;
-  margin-top: 6px;
+.feedback-backtop {
+  align-items: center;
+  background-color: #fff !important;
+  border-radius: 8px !important;
+  bottom: 80px !important;
+  box-shadow: 0 4px 12px 0 rgba(4, 43, 79, 0.12);
+  cursor: pointer;
+  display: flex !important;
+  height: 36px !important;
+  justify-content: center !important;
+  position: fixed;
+  right: 10px !important;
+  width: 36px !important;
+  background-image: none !important;
   color: #333;
 }
-.foot-dialog-feedback {
-  .el-dialog__body {
-    padding: 0 !important;
-  }
+.new-popper {
+  border-radius: 8px !important;
+}
+.service_feddback_box {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 10px;
 }
 
-/* 用户右侧 */
 .dr-feedback {
-  position: fixed;
-  bottom: 150px;
-  transform: translate(-50%, -50%);
-  right: 12px;
-  background-color: #fff;
-  box-shadow: 0 4px 12px 0 rgb(4 43 79 / 12%);
-  width: 48px;
-  box-sizing: border-box;
-  font-size: 14px;
-  color: #617288;
+  background: linear-gradient(144deg, #00b8fe 16%, #0082fc 87%);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px 0 rgba(4, 43, 79, 0.12);
+  height: 84px;
+  width: 36px;
+  line-height: 1.5714285714285714;
+}
+
+.dr-feedback,
+.dr-feedback-inner {
+  align-items: center;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+}
+.dr-feedback-inner {
+  color: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 14px;
+  text-align: center;
+  width: 80%;
+}
+.dr-feedback-inner-icon {
+  height: 20px;
+  margin-bottom: 8px;
+  width: 20px;
+}
+.dr-feedback-popover {
+  box-sizing: border-box;
+  padding: 4px;
+  width: 100%;
+}
+.dr-feedback-popover:before {
+  content: "";
+  position: absolute;
+  right: -20px;
+  top: 0;
+  width: 20px;
+  height: 100%;
+}
+.ant-space {
+  display: inline-flex;
+}
+.ant-space-align-center {
+  align-items: center;
+}
+.dr-feedback-popover-wrapper .dr-feedback-popover-item {
+  align-items: flex-start;
+  background: linear-gradient(180deg, #f3f6ff, #fff);
+  border: 0.5px solid #d6dfe7;
   border-radius: 8px;
-  overflow: hidden;
-  z-index: 999;
-
-  .dr-feedback-item {
-    transition: all 0.3s;
-    padding: 16px 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    cursor: pointer;
-    text-align: center;
-
-    &:not(:last-of-type) {
-      border-bottom: 1px solid #edf3f9;
-    }
-
-    &:hover {
-      color: #0082fc;
-    }
-
-    .dr-feedback-item-icon {
-      width: 20px;
-      height: 20px;
-      margin-bottom: 8px;
-    }
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
+  box-sizing: border-box;
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 14px;
+  line-height: 1.5714285714285714;
 }
+.dr-feedback-popover-wrapper .dr-feedback-popover-item-logo {
+  width: 48px;
+}
+.dr-feedback-popover-wrapper .dr-feedback-popover-item-logo img {
+  width: 100%;
+  border: none;
+}
+.dr-feedback-popover-item-title-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+.dr-feedback-popover-wrapper .dr-feedback-popover-item-title-wrapper .title {
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 24px;
+  text-align: left;
+}
+.dr-feedback-popover-wrapper .dr-feedback-popover-item .grey-text {
+  color: #8a9cb0;
+  font-size: 14px;
+}
+.dr-feedback-popover-wrapper .dr-feedback-popover-item-info-wrapper {
+  margin-top: 10px;
+}
+.dr-feedback-popover-wrapper .dr-feedback-popover-item .blue-text {
+  color: #0082fc;
+  font-size: 14px;
+}
+.dr-feedback-item {
+  display: flex;
+  gap: 10px;
+}
+</style>
 
-.dr-feedback-contract-item {
-  &:not(:last-child) {
-    margin-bottom: 20px;
-  }
-
-  a {
-    color: #1890ff;
-  }
-
-  .dr-feedback-contract-item-title {
-    color: #333 !important;
-    color: var(--dr-text-black);
-    font-size: 14px;
-    font-weight: 700;
-    margin-bottom: 4px;
+<style lang="scss">
+.dia-msg-til {
+  background-color: #fefbe6;
+  padding: 10px 20px;
+  border: 1px solid #ffe58f;
+  margin-top: 6px;
+  color: #333;
+}
+.foot-dialog-feedback {
+  .el-dialog__body {
+    padding: 0 !important;
   }
 }