首页样式开发

common/styles/global/pages.scss

@@ -43,6 +43,31 @@
 		.xqhz-box{background-image: url("@/static/images/index/zsjy-img2.png");}
 	}
 	
+	.index-menu-btn,.index-close-btn{
+		width: 100rpx;height: 100rpx;border-radius: 50%;z-index: 2;
+		background-color: #1460b6;position: fixed;right: 20rpx;bottom: 150rpx;
+		&::after{width: 50rpx;height: 50rpx;position: absolute;top: 25rpx;left: 25rpx;
+		@include dljt-no-repeat-cover;content: '';}
+	}
+	.index-menu-btn{
+		overflow: hidden;
+		&::after{
+			background-image: url("@/static/images/common/menu-icon.png");
+		}
+	}
+	.index-close-btn{
+		overflow: unset;
+		&::after{
+			background-image: url("@/static/images/common/menu-close.svg");
+		}
+	}
+	.index-text-list-show,.index-text-list-hiden{
+		width:100rpx;height:240rpx;position: absolute;bottom: 110rpx;transition: all 0.3s;z-index: 1;
+		.index-text-btn{
+			width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #1460b6;margin-bottom: 24rpx;
+			display: flex;align-items: center;justify-content: center;font-size: 25rpx;color: #fff;text-align: center;}
+	}
+	.index-text-list-hiden{bottom:70rpx;}
 }
 
 

pages/index/index.vue

@@ -59,7 +59,12 @@
 
 		<!-- 底部导航 -->
 		<!-- <MtaTabBar></MtaTabBar> -->
-
+		<view :class="indexMenu" @click="menuClick">
+			<view :class="indexList">
+				<view class="index-text-btn" @click="goFun('zsrx')">招生<br/>热线</view>
+				<view class="index-text-btn" @click="goFun('ewm')">首页<br/>二维码</view>
+			</view>
+		</view>
 
 	</view>
 </template>
@@ -79,7 +84,8 @@
 	import MtaFooter from "@/components/MtaFooter.vue"
 	import default2 from '@/static/images/common/news-bj2.png'
 
-
+	let indexMenu = ref('index-menu-btn');
+	let indexList = ref('index-text-list-hiden');
 	const banners = ref('');
 	const data = reactive({
 		xinwen: [],
@@ -96,12 +102,30 @@
 		pageInit();
 	})
 	
+	function menuClick(){
+		if(indexMenu.value==='index-menu-btn'){
+			indexMenu.value='index-close-btn'
+			indexList.value='index-text-list-show'
+		}else{
+			indexMenu.value='index-menu-btn'
+			indexList.value='index-text-list-hiden'
+		}
+	}
+	
 	function goFun(code) {
 		if (code == 'wnlqfs') {
 			uni.navigateTo({
 				url: '/pages/zsjyWangnianluqufenshu/zsjyWangnianluqufenshu'
 			})
-		} else {
+		}else if (code == 'zsrx') {
+			uni.navigateTo({
+				url: '/pages/zhaoshengrexian/zhaoshengrexian'
+			})
+		}else if (code == 'ewm') {
+			uni.navigateTo({
+				url: '/pages/erweima/erweima'
+			})
+		}else {
 			uni.navigateTo({
 				url: '/pages/zsjyXiaoqihezuo/zsjyXiaoqihezuo'
 			})

static/images/common/menu-close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755247545548" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3953" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60"><path d="M547.14368 512l329.45664 329.45664a23.04 23.04 0 0 1-32.58368 32.58368L514.56 544.58368l-329.45664 329.45664a23.04 23.04 0 0 1-32.58368-32.58368L481.97632 512 152.51968 182.54336a23.04 23.04 0 0 1 32.58368-32.58368L514.56 479.41632l329.45664-329.45664a23.04 23.04 0 0 1 32.58368 32.58368L547.14368 512z" fill="#ffffff" p-id="3954" data-spm-anchor-id="a313x.search_index.0.i13.6ed93a81Uv7h4i" class="selected"></path></svg>