Parcourir la source

ai添加移动端适配

wangtao il y a 1 jour
Parent
commit
1df0ad5d51
2 fichiers modifiés avec 60 ajouts et 2 suppressions
  1. 52 1
      src/assets/styles/common/style.css
  2. 8 1
      src/components/layout/feedFix.vue

+ 52 - 1
src/assets/styles/common/style.css

@@ -6636,7 +6636,7 @@
 
             
 
-
+           
             
             .feedBackBox .contactAi {
                 position: relative;
@@ -6688,6 +6688,9 @@
                 /* 箭头加轻微阴影,与容器阴影衔接(可选,增强立体感) */
                 box-shadow: 0px 0 0px 0px rgba(0, 0, 0, 0.05);
             }
+            .closeAi{
+                display: none;
+            }
             
             /* .feedBackBox .contactAi:hover div {
                 display: block
@@ -7026,6 +7029,54 @@
                 }
             }
 
+            @media screen and (max-width: 1000px) {
+                .feedBackBox .contactAi {
+                    /* display: none; */
+                }
+                .feedBackBox .contactAi {
+                    position: relative;
+                }
+                .feedBackBox .contactAi .aiMask {
+                    width:200px;
+                    height:40px;
+                    position: fixed;
+                    left:10px;
+                    bottom:10px;
+                    background: #fff;
+                    /* display: none; */
+                }
+                .feedBackBox .contactAi .aiMask img{
+                    width:180px;
+                    margin:10px auto;
+                }
+                .feedBackBox .contactAi .content {
+                    width: 100vw;
+                    height:calc(100vh - 90px);
+                    border-radius: 20px;
+                    background: #fff;
+                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); 
+                    /* display: none; */
+                    position: fixed;
+                    padding:0;
+                    right: 0px;
+                    bottom: 0px;
+                }
+                .closeAi{
+                    position: absolute;
+                    z-index: 9999;
+                    display: block;
+                    bottom:10px;
+                    right:10px;
+                }
+                .closeAi span{
+                    width:50px;
+                    height:50px;
+                    margin:0px 5px 0;
+                    font-size: 46px;
+                    color:#082567;
+                    transform: rotate(45deg); 
+                }
 
+            }
 
               /* 新闻新模板 end */

+ 8 - 1
src/components/layout/feedFix.vue

@@ -25,6 +25,10 @@ function scrollToTop() {
 function showAiIframe(){
     aiIframeState.value = !aiIframeState.value
 }
+function closeAi(){
+    console.log(111)
+    aiIframeState.value = false
+}
 </script>
 <template>
 <div class="feedBackBox">
@@ -63,7 +67,7 @@ function showAiIframe(){
         <div class="content" v-if="aiIframeState">
             <iframe
             src="https://ai.usky.cn/chatbot/KwhqwXmI5KFHOP5v"
-            style="width: 100%; height: 100%; margin:0 0;"
+            style="width: 100%; height: 100%; "
             frameborder="0"
             id="aiIframe"
             allow="microphone">
@@ -73,6 +77,9 @@ function showAiIframe(){
             <img src="@/assets/img/logo-text.png" alt="">
         </div>
     </div>
+    <div class="closeAi" @click="closeAi" v-if="aiIframeState">
+        <span>+</span>
+    </div>
     <div @click="scrollToTop" id="scroll-up" style="opacity:0">
         <img src="@/assets/img/home/f_top.png" alt="">
     </div>