Merge pull request #32 from School-of-Website-Engineering/develop

School-of-Website-Engineering · Jan 19, 2023 · a703fc3 · a703fc3
2 parents fc2e1d4 + a1a7e4d
commit a703fc3
Show file tree

Hide file tree

Showing 4 changed files with 237 additions and 377 deletions.
diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
@@ -30,7 +30,7 @@ body {
     line-height: 1.375;
 }
 
-.warp {
+.warp,.wrap {
     width: $content-width;
     margin: 0 auto;
 }
diff --git a/src/components/home/JfTitle.vue b/src/components/home/JfTitle.vue
@@ -0,0 +1,49 @@
+<template>
+	<div class="title">
+		<div class="l">
+			<img :src="imgSrc" alt="" />
+			<h2>{{ title1 }}</h2>
+		</div>
+		<div class="r" v-show="title1 != '积分攻略'">
+			更多
+			<span><img src="../../assets/img/arrow.png" alt="" /></span>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: ["title1", "imgSrc"],
+	data() {
+		return {};
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+	display: flex;
+	justify-content: space-between;
+	padding-top: 50px;
+	padding-bottom: 20px;
+	.l {
+		display: flex;
+		align-items: center;
+		font-size: 30px;
+		font-family: SourceHanSansSC;
+		font-weight: bold;
+		color: #242b39;
+		h2 {
+			margin-left: 10px;
+		}
+	}
+	.r {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		span {
+			margin-left: 6px;
+		}
+	}
+}
+</style>
diff --git a/src/components/home/List.vue b/src/components/home/List.vue
@@ -0,0 +1,111 @@
+<template>
+	<ul class="list">
+		<li v-for="item in [10, 20, 30, 40]" :key="item">
+			<section>
+				<img src="../../assets/img/listimg.jpg" alt="" />
+				<div class="bottom-box">
+					<h3>商品标题</h3>
+					<p>200 积分</p>
+					<div class="btn">立即兑换</div>
+				</div>
+				<img
+					class="flag"
+					src="../../assets/img/section_new.png"
+					alt=""
+				/>
+				<img
+					class="flag"
+					src="../../assets/img/section_hot.png"
+					alt=""
+				/>
+			</section>
+		</li>
+	</ul>
+</template>
+
+<script>
+export default {
+	data() {
+		return {};
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+	/* width: 1220px; */
+	/* overflow: hidden; */
+	display: flex;
+	/* 自动换行 */
+	flex-wrap: wrap;
+
+	li {
+		&:nth-of-type(4n) {
+			margin-right: 0px;
+		}
+		width: 285px;
+		float: left;
+		margin-bottom: 20px;
+		margin-right: 20px;
+		position: relative;
+		section {
+			width: 285px;
+			height: 492px;
+			position: relative;
+			transition: all 0.5s linear;
+		}
+
+		.bottom-box {
+			width: 285px;
+			height: 162px;
+			background-color: #fff;
+			text-align: center;
+			h3 {
+				font-size: 18px;
+				font-family: SourceHanSansSC;
+				font-weight: 300;
+				color: #333333;
+				height: 56px;
+				line-height: 56px;
+				/* background-color: #ffc; */
+			}
+			p {
+				font-size: 18px;
+				font-family: SourceHanSansSC;
+				font-weight: bold;
+				color: #fd604d;
+			}
+			.btn {
+				width: 100px;
+				height: 36px;
+				line-height: 36px;
+				border: 1px solid #0a328e;
+				margin: 20px auto 0;
+				font-size: 18px;
+				font-family: SourceHanSansSC;
+				font-weight: 300;
+				color: #0a328e;
+			}
+		}
+
+		.flag {
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+
+		&:hover {
+			cursor: pointer;
+			section {
+				margin-top: -15px;
+				box-shadow: 0 0 10px #ccc;
+				.btn {
+					background-color: #0a328e;
+					color: #fff;
+				}
+			}
+		}
+	}
+}
+</style>