下载页

layouts/default.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-04 17:56:39
  * @LastEditors: ch
- * @LastEditTime: 2022-05-08 15:53:49
+ * @LastEditTime: 2022-05-27 16:40:50
  * @Description: file content
 -->
 <template>
@@ -12,7 +12,7 @@
     <div class="layout-content">
       <Nuxt />
     </div>
-    <Footer />
+    <!-- <Footer /> -->
   </div>
 </template>
 <script>

layouts/module/header/HeaderCategory.vue

@@ -2,7 +2,6 @@
   <div class="header-category">
     <!-- 热门分类 -->
     <div
-      v-show="showCategroyTab"
       class="header-box-tab__category"
       @mouseenter="handleCategoryChange(true)"
       @mouseleave="handleCategoryChange(false)"
@@ -12,7 +11,6 @@
         <span>热门分类</span>
       </div> -->
       <div
-        v-show="isCategroyOpen || categroyVisible"
         class="tab-category__menu"
         @mouseenter="handleCategoryTwoChange(true)"
         @mouseleave="handleCategoryTwoChange(false)"
@@ -68,7 +66,7 @@ export default {
     return {
       CATEGROY_LEVEL,
       categroyTwoVisible: false, // 是否展示二级分类
-      categroyVisible: false, // 是否展示一级分类
+      categroyVisible: true, // 是否展示一级分类
       currentCategroyId: 0, // 当前鼠标悬停的一级分类id
       list: [],
     };

pages/down/index.vue

@@ -2,30 +2,98 @@
  * @Author: ch
  * @Date: 2022-05-26 16:08:17
  * @LastEditors: ch
- * @LastEditTime: 2022-05-26 17:56:11
+ * @LastEditTime: 2022-05-27 16:52:18
  * @Description: file content
 -->
 <template>
-	<div>
+	<div class="main">
-		<h2>下载马士兵严选APP</h2>
+		<h2 class="title">下载马士兵严选APP</h2>
-		<p><b>精选好物</b><span>.</span><b>精致生活</b></p>
+		<p class="desc"><b>精选好物</b><span></span><b>精致生活</b></p>
-		<ul>
+		<ul class="qcode">
 			<li>
-				<div></div>
+				<div class="qcode--box">
-				<span>Android</span>
+
+				</div>
+				<span class="qcode--title">Android</span>
 			</li>
 			<li>
-				<div></div>
+				<div class="qcode--box"></div>
-				<span>iOS</span>
+				<span class="qcode--title">iOS</span>
 			</li>
 			<li>
-				<div></div>
+				<div class="qcode--box"></div>
-				<span>微信公众号</span>
+				<span class="qcode--title">微信公众号</span>
 			</li>
 			<li>
-				<div></div>
+				<div class="qcode--box"></div>
-				<span>H5</span>
+				<span class="qcode--title">H5</span>
 			</li>
 		</ul>
+		<i class="bg1"></i>
+		<i class="bg1"></i>
+		<i class="bg1"></i>
+		<i class="bg1"></i>
+		<i class="bg1"></i>
 	</div>
 </template>
+<style lang="scss" scoped>
+.main{
+	height: calc(100vh - 132px);
+	overflow: hidden;
+}
+.title{
+	text-align: center;
+	font-size: 40px;
+	font-family: 'PingFang SC-粗体, PingFang SC';
+	font-weight: bold;
+	color: #191919;
+	margin-top: 115px;
+}
+.desc{
+	text-align: center;
+	font-size: 24px;
+	font-family: 'PingFang SC-常规体, PingFang SC';
+	color: #A8A8A8;
+	line-height: 21px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: 24px;
+	span{
+		margin: 0 15px;
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		background: #A8A8A8;
+		border-radius: 6px;
+	}
+}
+.qcode{
+	width: 930px;
+	margin: 73px auto;
+	display: flex;
+	justify-content: space-between;
+	li{
+		text-align: center;
+	}
+	&--box{
+		width: 180px;
+		height: 180px;
+		background: #F4F3F3;
+	}
+	&--title{
+		display: block;
+		font-size: 20px;
+		margin: 25px 0;
+	}
+}
+.bg1{
+	position: fixed;
+	left: 0;
+	bottom: 45px;
+	width: 152px;
+	height: 257px;
+	background: url('@/assets/img/down/bg1.png');
+	background-size: 100%;
+}
+</style>