Kaynağa Gözat

feat(home page): add floating contact button and popup modal

1. 新增右下角悬浮的添加老师按钮,带文字描边样式
2. 添加点击后弹出的微信二维码联系弹窗
3. 优化首页cl-page配置,关闭默认返回顶部
4. 调整physics组件布局与部分静态资源
5. 新增文字描边的css工具类
408249787@qq.com 2 hafta önce
ebeveyn
işleme
39f4f80ebc
2 değiştirilmiş dosya ile 39 ekleme ve 12 silme
  1. 15 10
      pages/index/components/physics.uvue
  2. 24 2
      pages/index/home.uvue

+ 15 - 10
pages/index/components/physics.uvue

@@ -2,10 +2,14 @@
 import { ref } from 'vue'
 import { router } from '@/.cool'
 import { user } from '@/.cool'
+const visible = ref(false)
 
 function handleView(url) {
   router.push({ path: url })
 }
+function openPopup() {
+  visible.value = true
+}
 </script>
 <template>
   <view class="bottom">
@@ -18,20 +22,20 @@ function handleView(url) {
 
       </view>
     </view>
-    <view class="flex-1 flex flex-col items-center justify-between gap-2 bg1 py-3"
+    <view 
       @tap="handleView('/pages/test/index')">
-      <cl-image src="https://oss.xiaoxiongcode.com/static/home/17.png" mode="widthFix" width="40%" height="auto" />
-      <text class="text-[14px]">趣味虚拟实验</text>
+      <cl-image src="https://oss.xiaoxiongcode.com/static/home/113.png" mode="heightFix" width="auto" height="80px" />
+      <!-- <text class="text-[14px]">趣味虚拟实验</text> -->
     </view>
-    <view class="flex-1 flex flex-col items-center justify-between gap-1 bg2 py-3"
+    <view 
       @tap="handleView('/pages/card/index')">
-      <cl-image src="https://oss.xiaoxiongcode.com/static/home/19.png" mode="widthFix" width="70%" height="auto" />
-      <text class="text-[14px]">我的收获</text>
+      <cl-image src="https://oss.xiaoxiongcode.com/static/home/112.png" mode="heightFix" width="auto" height="80px" />
+      <!-- <text class="text-[14px]">我的收获</text> -->
     </view>
-    <view class="flex-1 flex flex-col items-center justify-between gap-1 bg3 py-3">
+    <!-- <view class="flex-1 flex flex-col items-center justify-between gap-1 bg3 py-3" @tap="openPopup">
       <cl-image src="https://oss.xiaoxiongcode.com/static/home/18.png" mode="widthFix" width="35%" height="auto" />
       <text class="text-[14px]">AI问答</text>
-    </view>
+    </view> -->
   </view>
   <view class="content" @tap="handleView('/pages/catalog/index')">
     <cl-image src="https://oss.xiaoxiongcode.com/static/home/3.gif" mode="heightFix" height="100%" width="auto" />
@@ -45,16 +49,17 @@ function handleView(url) {
       </view>
     </view>
   </view>
+ 
 </template>
 <style lang="scss" scoped>
 .bottom {
-  @apply absolute bottom-[1vh] left-1/2 w-full max-w-[800px] rounded-[20px] px-10 py-1 flex flex-row items-center justify-between gap-5;
+  @apply absolute bottom-[1vh] left-1/2 w-full max-w-[600px] rounded-[20px] px-10 py-1 flex flex-row items-center justify-between gap-5;
   transform: translateX(-50%);
 
   .progress {
     @apply w-[400px] h-[80px] rounded-[40px] flex justify-center gap-2 px-[30px] gap-3;
     background: linear-gradient(0deg, #AAE3FF 0%, #DFF4FD 100%);
-    width: 40%;
+    width: 50%;
   }
 
   .check {

+ 24 - 2
pages/index/home.uvue

@@ -48,10 +48,11 @@ function handleView(url) {
 	router.push({ path: url })
 }
 const userInfo = computed(() => user.info.value?.userInfo)
+const visible = ref(false)
 
 </script>
 <template>
-	<cl-page>
+	<cl-page :backTop="false">
 		<img src="https://oss.xiaoxiongcode.com/static/home/11.jpg" alt="" class="w-full h-full object-cover" />
 		<view class="menus ">
 			<view v-for="item in menuList" :key="item.code"
@@ -61,7 +62,20 @@ const userInfo = computed(() => user.info.value?.userInfo)
 				<text class="text-[12px]">{{ item.label }}</text>
 			</view>
 		</view>
-
+		<view class="flex flex-col items-center justify-center fixed bottom-[3vh] right-[3vh]  " >
+			<view class="bg-[#09ba07] p-2 rounded-full border-[2px] border-[#FFF] border-solid " @tap="visible = true">
+				<image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" class="w-5 h-5"></image>
+			</view>
+			<text class="text-[14px] text-white font-bold text-stroke">添加老师</text>
+		</view>
+		<cl-popup v-model="visible"  :size="400" :show-header="false" direction="center">
+			<view class="flex flex-col items-center justify-center gap-4 py-7 bg-slate-50">
+				<cl-text class="text-center " color="#09ba07" :size="30"> ——专属服务内容—— </cl-text>
+				<image src="https://oss.xiaoxiongcode.com/static/home/qr.png"  show-menu-by-longpress   class="w-32 h-32" />
+				<view class="text-center "> <cl-text class="text-center" color="#999" :size="14"> 长按识别二维码 </cl-text>
+				<cl-text class="text-center" color="#999" :size="14"> 添加微信,享专业老师服务 </cl-text> </view>
+			</view>
+		</cl-popup>
 		<Physics v-if="selected === 'physics'" />
 		<Chinese v-else-if="selected === 'chinese'" />
 		<English v-else-if="selected === 'english'" />
@@ -79,4 +93,12 @@ const userInfo = computed(() => user.info.value?.userInfo)
 .selected {
 	@apply scale-[1.1] bg-[#f0f0f0] rounded-xl;
 }
+
+.text-stroke {
+	text-shadow: 
+		-1px -1px 0 #000,  
+		1px -1px 0 #000,
+		-1px 1px 0 #000,
+		1px 1px 0 #000;
+}
 </style>