初次更新

Signed-off-by: YangWX <shiy720@hotmail.com>

common/anhan.css

@@ -0,0 +1,213 @@
+* {
+	margin: 0px;
+	padding: 0px;
+	font-family: "微软雅黑";
+}
+
+.page {
+	width: 100vw;
+	height: 100vh;
+}
+
+.wraper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	align-items: center;
+}
+
+.header {
+	background: rgb(8, 117, 94);
+	color: #fff; 
+	flex: 0 0 100rpx;
+	width: 80%;
+	display: flex;
+	justify-items: center;
+	
+	/* 不放大不缩小固定100rpx */
+}
+.header-item{
+	width: fit-content;
+	margin: 20rpx;
+	border: 2rpx solid #e5e5e5;
+	text-align: center; 
+	font-size: 36rpx;
+	padding: 10rpx 30rpx;
+	border-radius: 30rpx;
+	background-color: #a8fcfc;
+}
+.main {
+
+	height: calc(100vh - 200rpx);
+	width: 80%;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	flex-direction: row;
+}
+
+.main-left {
+	width: 20%;
+	background-color: aqua;
+}
+
+.main-right {
+	width: 80%;
+}
+
+.footer {
+	position: fixed;
+	bottom: 0px;
+	width: 80%;
+	background: rgb(8, 117, 94);
+	color: #fff;
+	line-height: 100rpx;
+	flex: 0 0 100rpx;
+
+}
+
+
+.main-scroll {
+	right: 0;
+	top: 0;
+	bottom: 0;
+	height: calc(100% - 200rpx);
+}
+
+
+.list-box {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.list-item {
+	width: calc(50% - 10rpx);
+	margin: 10rpx 2rpx;
+	border: 2rpx solid #ececec;
+	display: flex;
+	flex-wrap: none;
+	justify-items: center;
+}
+
+.list-item-left {
+	width: 320rpx;
+	height: 320rpx;
+}
+
+.list-item-img {
+	width: 300rpx;
+	height: 300rpx;
+	margin: 10rpx;
+}
+
+.list-item-right {
+	flex: 1;
+	background-color: aliceblue;
+	padding: 10rpx;
+	min-width: 0;
+}
+
+
+
+.list-item-title {
+	font-size: 1.5em;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	word-break: break-all;
+}
+
+
+
+@media only screen and (max-width: 1200px) {}
+
+@media only screen and (max-width: 980px) {}
+
+@media only screen and (max-width: 640px) {
+	.header {
+		background: rgb(8, 117, 94);
+		color: #fff; 
+		flex: 0 0 100rpx;
+		width: 100%;
+		display: flex;
+		justify-items: center;
+		
+		/* 不放大不缩小固定100rpx */
+	}
+	.header-item{
+		width: fit-content;
+		margin: 20rpx;
+		border: 2rpx solid #e5e5e5;
+		text-align: center; 
+		font-size: 36rpx;
+		max-height: 80%;
+		padding: 10rpx 30rpx;
+		border-radius: 30rpx;
+		background-color: #a8fcfc;
+	}
+	.main {
+		width: 100%;
+		margin: 0rpx 20rpx;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+	}
+
+	.main-left,
+	.main-right {
+		width: 100%;
+	}
+
+	.main-scroll {
+		position: absolute;
+	}
+
+	.footer {
+		width: 100%;
+
+	}
+
+	.list-box {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.list-item {
+		width: calc(100% - 5rpx);
+		margin-top: 10rpx;
+		margin-bottom: 10rpx;
+
+		display: flex;
+		flex-wrap: none;
+		justify-content: space-around;
+	}
+
+	.list-item-left {
+
+		width: 180rpx;
+		height: 180rpx;
+	}
+
+	.list-item-img {
+		width: 160rpx;
+		height: 160rpx;
+		margin: 10rpx;
+	}
+
+	.list-item-right {
+		width: calc(100% - 180rpx);
+		min-width: 0; 
+	}
+
+	.list-item-title {
+		font-size: 36rpx;
+		font-weight: 600; 
+	}
+ 
+}