pad第一版

common/styles/global/components.scss

@@ -1,5 +1,46 @@
 /******************** 这里放组件样式 ********************/
+/**************** 系统响应式 ****************/
+@mixin mediaSmall() {
+  @media screen and (min-width: 650px) {
+    @content;
+  }
+}
+
+@mixin mediaMiddle() {
+  @media screen and (min-width: 820px) {
+    @content;
+  }
+}
+
+@mixin mediaBig() {
+  @media screen and (min-width: 1024px) {
+    @content;
+  }
+}
 
+// pad上隐藏 (大于768的) vue中使用
+  @media screen and (min-width: 768px) {
+    .ezy-hidden-pad{display: none!important;}
+  }
+
+// 手机上隐藏 (小于768的) vue中使用
+  @media screen and (max-width: 767px) {
+    .ezy-hidden-phone{display: none!important;}
+  }
+  
+  // 对于Pad上隐藏的元素 ---scss中使用
+  @mixin hideOnPad() {
+     @media screen and (min-width: 768px) {
+         display: none !important;
+       }
+  }
+  
+  // 对于手机上隐藏的元素 ---scss media中使用
+  @mixin hideOnPhone() {
+      @media screen and (max-width: 767px) {
+          display: none !important;
+        }
+  }
 /***** view *****/
 view{box-sizing: border-box;}
 
@@ -82,7 +123,16 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 	.tabbar-item-box{
 		width: 25%;display: flex;flex-wrap: nowrap;justify-content: space-evenly;
 	}
-	.tabbar-item{width: 60rpx;height: 80rpx;@include ezy-no-repeat-cover;z-index: 2;}
+	.tabbar-item{width: 60rpx;height: 80rpx;@include ezy-no-repeat-contain;z-index: 2;}
+	/*** pad ***/
+	@include mediaSmall() {
+		height: 80rpx;
+		.tabbar-item{width: 37rpx;height: 59rpx;}
+	}
+	@include mediaBig() {
+		height: 180rpx;
+		.tabbar-item{width: 82rpx;height: 130rpx;}
+	}
 }
 
 
@@ -121,10 +171,19 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 		width: 24rpx;height: 38rpx;content: '';display: block;margin-left: 24rpx;
 		background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
 	}
+	/*** pad ***/
+	@include mediaSmall() {
+		.nav-bar-title{font-size: 28rpx;}
+	}
+	@include mediaBig(){
+		.nav-bar-title{font-size: 66rpx;height: 180rpx;line-height: 180rpx;}
+	}
 }
 .icon-title-navBar-box::before{
 	width: 100%;height: 356rpx;content: '';display: block;position: absolute;z-index: 0;top: 0;left: 0;
-	background-image: url("@/static/images/common/page-header-bj.png");@include ezy-no-repeat-cover(top);
+	background-image: url("@/static/images/phone/common/page-header-bj.png");@include ezy-no-repeat-cover(top);
+	@include mediaSmall() {height: 160rpx;background-image: url("@/static/images/pad/common/page-header-bj.png");}
+	@include mediaBig() {height: 350rpx;}
 }
 // 仅一个返回按钮
 .ezy-nav-bar-icon{width: 100rpx;height: 100rpx;position: absolute;left: 0;top: var(--status-bar-height);}
@@ -253,6 +312,11 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 	display: flex;flex-direction: column;flex: 1;
 	position: relative;background-color: #fff;z-index: 1;
 	border-radius: 20rpx 20rpx 0 0;padding: 42rpx 0;overflow: hidden;
+	@include mediaSmall() {
+		padding: 28rpx 0 10rpx;
+	}
+	@include mediaBig() {padding: 64rpx 0 32rpx;}
+
 }
 
 /***** 模拟标题栏 *****/
@@ -374,13 +438,25 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 .ezy-xueke-tab-box{
 	display: flex;justify-content: center;margin-bottom: 24rpx;flex-shrink: 0;
 	.tab-item{
-		width: 242rpx;height: 90rpx;line-height: 90rpx;@include ezy-no-repeat-cover;
-		background-image: url("@/static/images/xuanke/tab-item-bj.png");
-		text-align: center;color: #a6a6a6;
+		width: 242rpx;height: 90rpx;line-height: 90rpx;font-size: 30rpx;
+		background-image: url("@/static/images/phone/xuanke/tab-item-bj.png");
+		text-align: center;color: #a6a6a6;@include ezy-no-repeat-cover;
 	}
 	.tab-item.active{
-		color: #fff;background-image: url("@/static/images/xuanke/tab-item-a.png");
+		color: #fff;background-image: url("@/static/images/phone/xuanke/tab-item-a.png");
 	}
+	
+	@include mediaSmall() {
+		.tab-item{
+			width: 238rpx;height: 58rpx;line-height: 58rpx;font-size: 24rpx;
+			background-image: url("@/static/images/pad/xuanke/tab-item-bj.png");}
+		.tab-item.active{background-image: url("@/static/images/pad/xuanke/tab-item-a.png");}
+	}
+	@include mediaBig() {
+		.tab-item{width: 620rpx;height: 152rpx;line-height: 152rpx;font-size: 60rpx;margin: 0 6rpx;}
+		}
+
+	
 }
 
 // tab页面
@@ -461,4 +537,8 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 }
 
 // 没有更多
-.ezy-no-more{color: rgb(119, 119, 119);font-size: 28rpx;text-align: center;}
+.ezy-no-more{
+	color: rgb(119, 119, 119);font-size: 28rpx;text-align: center;
+	@include mediaSmall() {font-size: 18rpx;}
+	@include mediaBig() {font-size: 40rpx;}
+}

common/styles/global/pages.scss

@@ -260,34 +260,95 @@
 	width: 100%;height: 100vh;display: flex;flex-direction: column;padding-bottom: 100rpx;overflow: hidden;
 		.sx-card-list{overflow-y: auto;flex: 1;padding: 24rpx 0 0;}
 		.sx-card-box{
-			border-radius: 16rpx;margin: 0 24rpx 32rpx;padding: 32rpx;
-			box-shadow: 0 0rpx 6rpx rgba(100, 159, 241, 0.3);
+			border-radius: 16rpx;margin: 0 24rpx 32rpx;padding: 32rpx;overflow: hidden;
+			box-shadow: 0 0rpx 6rpx rgba(100, 159, 241, 0.3);position: relative;
 			.card-head-box{
-				display: flex;
-				.head-img{width: 200rpx;height: 280rpx;flex-shrink: 0;}
+				display: flex;position: relative;z-index: 4;
+				.head-img{width: 200rpx;height: 280rpx;flex-shrink: 0;border-radius: 12rpx;}
 				.head-right-box{
 					margin-left: 24rpx;
 					.head-title{font-size: 34rpx;color: #333;font-weight: bold;margin-bottom: 32rpx;}
-					.head-content{font-size: 26rpx;color: #666;text-align: justify;margin-bottom: 24rpx;}
+					.head-content{font-size: 26rpx;color: #666;text-align: justify;margin-bottom: 24rpx;@include multi-line-ellipsis(4);}
 				}
 			}
 			.card-body-box{
-				border-top: 3rpx dashed #eee;margin-top: 42rpx;
+				border-top: 3rpx dashed #eee;margin-top: 42rpx;position: relative;z-index: 4;
 				.body-title{color: #7db0f4;margin: 24rpx 0 16rpx;font-size: 30rpx;}
 				.dj-item-row{
 					display: flex;flex-wrap: wrap;
 				}
 				.dj-item{
-					width: 202rpx;height: 77rpx;line-height: 77rpx;color: #fff;
+					width: 202rpx;height: 77rpx;line-height: 77rpx;color: #fff;font-size: 30rpx;
 					text-align: center;@include ezy-no-repeat-cover;margin: 12rpx 16rpx 12rpx 0;
-					background-image: url("@/static/images/xuanke/dj-item.png");
+					background-image: url("@/static/images/phone/xuanke/dj-item.png");
 				}
-				.dj-item.active{background-image: url("@/static/images/xuanke/dj-item-a.png");}
+				.dj-item.active{background-image: url("@/static/images/phone/xuanke/dj-item-a.png");}
 				.dj-item:nth-child(3n) {
 					margin-right: 0;
 				}
 			}
 		}
+		.sx-card-box::before,.sx-card-box::after{
+			content: '';@include ezy-no-repeat-cover;
+			position: absolute;z-index: 3;opacity: 0.7;
+			}
+		.sx-card-box::before{width: 500rpx;height: 473rpx;background-image: url("@/static/images/common/xk-mask-img1.png");top: -120rpx;left:-140rpx;}
+		.sx-card-box::after{background-image: url("@/static/images/common/xk-mask-img2.png");width: 280rpx;height: 265rpx;bottom: -40rpx;right:-60rpx;}
+	@include mediaSmall() {
+		padding-bottom: 80rpx;
+		.sx-card-list{padding: 6rpx 0 0;}
+		.sx-card-box{
+			border-radius: 6rpx;margin: 0 24rpx 16rpx;padding: 20rpx 20rpx 24rpx;
+			box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.3);
+			.card-head-box{
+				.head-img{width: 100rpx;height: 140rpx;border-radius: 8rpx;}
+				.head-right-box{
+					margin-left: 16rpx;
+					.head-title{font-size: 22rpx;margin-bottom: 12rpx;}
+					.head-content{font-size: 18rpx;margin-bottom: 6rpx;line-height: 1.8;@include multi-line-ellipsis(2);}
+				}
+			}
+			.card-body-box{
+				border-top: 1rpx dashed #ddd;margin-top: 6rpx;
+				.body-title{margin: 12rpx 0 6rpx;font-size: 20rpx;}
+				.dj-item{
+					width: 100rpx;height: 46rpx;line-height: 46rpx;font-size: 22rpx;margin: 8rpx 12rpx 8rpx 0;
+					background-image: url("@/static/images/pad/xuanke/dj-item.png");@include ezy-no-repeat-contain;
+				}
+				.dj-item.active{background-image: url("@/static/images/pad/xuanke/dj-item-a.png");}
+				.dj-item:nth-child(3n) {margin-right: 12rpx;}
+				.dj-item:nth-child(6n) {margin-right: 0;}
+			}
+		}
+		.sx-card-box::before{width:300rpx;height: 284rpx;top: -120rpx;left:-100rpx;}
+		.sx-card-box::after{width: 120rpx;height: 114rpx;bottom: -25rpx;right:-30rpx;}
+	}
+	@include mediaBig() {
+		padding-bottom: 180rpx;
+		.sx-card-list{padding: 42rpx 0 0;}
+		.sx-card-box{
+			border-radius: 16rpx;margin: 0 56rpx 40rpx;padding: 46rpx 46rpx 48rpx;
+			box-shadow: 0 0rpx 12rpx rgba(100, 159, 241, 0.3);
+			.card-head-box{
+				.head-img{width: 240rpx;height: 336rpx;border-radius: 16rpx;}
+				.head-right-box{
+					margin-left: 42rpx;
+					.head-title{font-size: 52rpx;margin-bottom: 12rpx;}
+					.head-content{font-size: 42rpx;margin-bottom: 6rpx;line-height: 1.8;@include multi-line-ellipsis(2);}
+				}
+			}
+			.card-body-box{
+				border-top: 4rpx dashed #ddd;margin-top: 36rpx;
+				.body-title{margin: 32rpx 0 24rpx;font-size: 46rpx;}
+				.dj-item{
+					width: 280rpx;height: 128rpx;line-height: 128rpx;font-size: 52rpx;margin: 16rpx 27rpx 16rpx 0;
+				}
+				.dj-item:nth-child(3n) {margin-right: 27rpx;}
+			}
+		}
+		.sx-card-box::before{width:640rpx;height: 606rpx;top: -240rpx;left:-200rpx;}
+		.sx-card-box::after{width: 280rpx;height: 265rpx;bottom: -50rpx;right:-60rpx;}
+	}
 }
 
 // 选版本

components/custom-tabbar/123.vue

@@ -37,23 +37,23 @@
 		data() {
 			return {
 				tabList: [{
-						iconPath: 'static/images/tabbar/unselect/xuanke-sj.png',
-						activePath: 'static/images/tabbar/select/xuanke-sj.png',
+						iconPath: 'static/images/common/tabbar/unselect/xuanke-sj.png',
+						activePath: 'static/images/common/tabbar/select/xuanke-sj.png',
 						path: `/pages/chanpinXuanze/index`
 					},
 					{
-						iconPath: 'static/images/tabbar/unselect/xuexi-sj.png',
-						activePath: 'static/images/tabbar/select/xuexi-sj.png',
+						iconPath: 'static/images/common/tabbar/unselect/xuexi-sj.png',
+						activePath: 'static/images/common/tabbar/select/xuexi-sj.png',
 						path: `/pages/chanpinneirong/index`
 					},
 					{
-						iconPath: 'static/images/tabbar/unselect/zl-sj.png',
-						activePath: 'static/images/tabbar/select/zl-sj.png',
+						iconPath: 'static/images/common/tabbar/unselect/zl-sj.png',
+						activePath: 'static/images/common/tabbar/select/zl-sj.png',
 						path: '/pages/game/index'
 					},
 					{
-						iconPath: 'static/images/tabbar/unselect/wode-sj.png',
-						activePath: 'static/images/tabbar/select/wode-sj.png',
+						iconPath: 'static/images/common/tabbar/unselect/wode-sj.png',
+						activePath: 'static/images/common/tabbar/select/wode-sj.png',
 						path: `/pages/chanpinMy/my`
 					},
 				],
@@ -165,4 +165,4 @@
 			this.currentTab = this.currentTabNumber
 		}
 	}
-</script>
+</script>

components/custom-tabbar/index.vue

@@ -26,26 +26,26 @@
         list: [{
             pagePath: '/pages/chanpinXuanze/index',
             text: "版本0",
-            iconPath: 'static/images/tabbar/unselect/xuanke-sj.png',
-            selectedIconPath: 'static/images/tabbar/select/xuanke-sj.png'
+            iconPath: 'static/images/common/tabbar/unselect/xuanke-sj.png',
+            selectedIconPath: 'static/images/common/tabbar/select/xuanke-sj.png'
           },
           {
             pagePath: '/pages/chanpinneirong/index',
             text: "学习1",
-            iconPath: 'static/images/tabbar/unselect/xuexi-sj.png',
-            selectedIconPath: 'static/images/tabbar/select/xuexi-sj.png'
+            iconPath: 'static/images/common/tabbar/unselect/xuexi-sj.png',
+            selectedIconPath: 'static/images/common/tabbar/select/xuexi-sj.png'
           },
           {
             pagePath: '/pages/chanpinZiliao/index',
             text: "游戏2",
-            iconPath: 'static/images/tabbar/unselect/zl-sj.png',
-            selectedIconPath: 'static/images/tabbar/select/zl-sj.png'
+            iconPath: 'static/images/common/tabbar/unselect/zl-sj.png',
+            selectedIconPath: 'static/images/common/tabbar/select/zl-sj.png'
           },
           {
             pagePath: '/pages/chanpinMy/my',
             text: "我的3",
-            iconPath: 'static/images/tabbar/unselect/wode-sj.png',
-            selectedIconPath: 'static/images/tabbar/select/wode-sj.png'
+            iconPath: 'static/images/common/tabbar/unselect/wode-sj.png',
+            selectedIconPath: 'static/images/common/tabbar/select/wode-sj.png'
           }
         ]
       };
@@ -62,7 +62,7 @@
     methods: {
       switchTab(item, index) {
         console.log('点击Tab，index:', index, '当前选中的selectedIndex:', this.selectedIndex);
-        
+
         // 如果点击的是当前已选中的Tab，不执行跳转
         if (this.selectedIndex === index) {
           console.log('点击的是当前已选中的Tab，不跳转');
@@ -113,4 +113,4 @@
     margin-bottom: 6rpx;
   }
 
-</style>
+</style>