新增3.24

src/App.vue

@@ -0,0 +1,165 @@
+<template>
+	<router-view></router-view>
+</template>
+
+<script>
+	export default {
+		name: 'app',
+		components: {},
+		mounted() {
+			this.$router.push('/index/product-details');
+		},
+	}
+</script>
+
+<style>
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	body {
+		background-color: #F2F2F2;
+	}
+	
+	ul,
+	li {
+		list-style: none;
+	}
+
+	a {
+		text-decoration: none;
+
+	}
+
+	a:hover {
+		transition: all 0.25s;
+		-moz-transition: all 0.25s;
+		-webkit-transition: all 0.25s;
+		-o-transition: all 0.25s;
+	}
+
+	button:hover {
+		cursor: pointer;
+	}
+
+	input::placeholder {
+		color: #919191;
+	}
+
+	input,
+	textarea,
+	button {
+		outline: 0;
+		background-color: initial;
+		border: none;
+	}
+
+	::-webkit-scrollbar {
+		width: 0 !important;
+	}
+
+	::-webkit-scrollbar {
+		width: 0 !important;
+		height: 0;
+	}
+
+	::-moz-scrollbar {
+		width: 0 !important;
+	}
+
+	::-moz-scrollbar {
+		width: 0 !important;
+		height: 0;
+	}
+
+	/* el分页重写 */
+	.el-pagination.el-pagination-override {
+		width: 100%;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.el-pagination.el-pagination-override .el-pagination__total {
+		margin-right: auto
+	}
+
+	.el-pagination>button {
+		background: #FFFFFF;
+		border: 1px solid #F2F2F2;
+	}
+
+	.el-pagination.el-pagination-override>.el-pager .number {
+		min-width: 30px;
+		height: 30px;
+		background: #FFFFFF;
+		border: 1px solid #F2F2F2;
+	}
+
+	.el-pagination.el-pagination-override>.el-pager .number:hover,
+	.el-pagination.el-pagination-override>.el-pager .number.active {
+		background-color: #BC423F !important;
+		color: #fff !important;
+	}
+
+	/* el模态窗重写 */
+	.el-dialog__wrapper.el-dialog-override .el-dialog__body {
+		padding: 0;
+	}
+
+	.el-dialog__wrapper.el-dialog-override .el-dialog__header {
+		height: 55px;
+		display: flex;
+		align-items: center;
+		padding: 0 20px;
+	}
+
+	.el-dialog__wrapper.el-dialog-override .el-dialog__header .el-dialog__title {
+		font-size: 14px;
+		font-weight: bold;
+	}
+
+	.el-dialog__wrapper.el-dialog-override .el-dialog__header .el-dialog__headerbtn {
+		top: none;
+	}
+
+	/* 模态窗居中 */
+	.el-dialog-override .el-dialog {
+		position: absolute;
+		margin: 0 !important;
+		width: 550px !important;
+		top: 50% !important;
+		left: 50% !important;
+		transform: translate(-50%, -50%) !important;
+	}
+
+	/* 模态窗中间内容 */
+	.form-box,
+	.form-wrap {
+		max-height: calc(100vh - 200px);
+		overflow: auto;
+		border-top: 1px solid #F0F0F0;
+
+	}
+
+	/* el下拉选择，el日期选择，el输入框，添加flex：1 */
+	.el-select,
+	.el-date-picker,
+	.el-input {
+		flex: 1;
+	}
+
+	/* 复选框颜色 */
+	.el-checkbox__input.is-checked .el-checkbox__inner,
+	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+		background-color: #BC423F !important;
+		border-color: #BC423F !important;
+	}
+
+	/* 处理flex布局 */
+	.preach-list li,
+	.form-row {
+		flex-shrink: 0;
+
+	}
+</style>

src/components/header.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div class="header">
+		<div class="header" :style="{background: backgroundColor}">
 			<div class="content-width">
 				<div class="header-between">
 					<div class="header-leftsidebar">
@@ -51,10 +51,17 @@
 
 <script>
 	export default {
-		name: 'Header',
+		name: 'Header',
+		props: {
+			// 背景颜色
+			backgroundColor: {
+				type: String,
+				default: '#fff',
+			},
+		},
 		data() {
 			return {
-
+				
 			}
 		}
 	}
@@ -67,7 +74,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		background-color: #fff;
+		/* background-color: #fff; */
 		position: fixed;
 		top: 0;
 		left: 0;

src/components/sub-header.vue

@@ -0,0 +1,158 @@
+<template>
+	<div>
+		<div class="sub-header">
+			<div class="sub-header-content">
+				<img src="../assets/logo-red.png" class="sub-header-logo">
+				<p class="sub-header-row">
+					<span>药食同源</span>
+					<span>康养食品</span>
+				</p>
+				<p class="sub-header-title">{{title}}</p>
+				<div class="header-rightsidebar">
+					<div class="process-box" v-if="!hide">
+						<div class="process-item active">
+							<div class="circle-row">
+								1
+							</div>
+							我的购物车
+						</div>
+						<div class="process-item active">
+							<div class="circle-row">
+								2
+							</div>
+							填写核对订单信息
+						</div>
+						<div class="process-item">
+							<div class="circle-row">
+								3
+							</div>
+							完成订单
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'Subheader',
+		props: {
+			// 标题
+			title: {
+				type: String,
+				default: '',
+			},
+			// 是否隐藏
+			hide: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		data() {
+			return {
+
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sub-header {
+		width: 100%;
+		height: 100px;
+		display: flex;
+		justify-content: center;
+		background-color: #FFFFFF;
+		position: fixed;
+		top: 40px;
+		left: 0;
+		z-index: 9999;
+	}
+
+	.sub-header-content {
+		width: 1200px;
+		height: 100px;
+		display: flex;
+		align-items: center;
+	}
+
+	.sub-header-logo {
+		width: 79px;
+		margin-right: 7px;
+	}
+
+	.sub-header-row {
+		display: flex;
+		flex-direction: column;
+		font-size: 16px;
+		color: #F2501A;
+		margin-right: 18px;
+	}
+
+	.sub-header-title {
+		color: #202020;
+		font-size: 16px;
+	}
+
+	.header-rightsidebar {
+		flex: 1;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.process-box {
+		/* width: 343px; */
+		display: flex;
+		/* 	justify-content: space-between; */
+		align-items: center;
+	}
+
+	.process-item {
+		width: 130px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		color: #D8D8D8;
+		font-size: 14px;
+		position: relative;
+	}
+
+	.process-item::after {
+		content: "";
+		width: 100%;
+		height: 1px;
+		background-color: #F2F2F2;
+		position: absolute;
+		right: -50%;
+		top: 15px;
+		z-index: -1;
+	}
+
+	.process-item:last-child::after {
+		background-color: initial;
+	}
+
+	.circle-row {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		background-color: #D8D8D8;
+		color: #FFFFFF;
+		font-size: 15px;
+		margin-bottom: 6px;
+	}
+
+	.process-item.active {
+		color: #F2501A;
+	}
+
+	.process-item.active .circle-row {
+		background-color: #F2501A;
+	}
+</style>

src/dist/css/app.1629924344655.css

@@ -0,0 +1 @@
+*{margin:0;padding:0}body{background-color:#f0f2f5}li,ul{list-style:none}a{text-decoration:none}a:hover{transition:all .25s;-moz-transition:all .25s;-webkit-transition:all .25s;-o-transition:all .25s}button:hover{cursor:pointer}button,input,textarea{outline:0}::-webkit-scrollbar{width:0!important;height:0}::-moz-scrollbar{width:0!important;height:0}.el-pagination.el-pagination-override{width:100%;display:flex;justify-content:flex-end}.el-pagination.el-pagination-override .el-pagination__total{margin-right:auto}.el-pagination>button{background:#fff;border:1px solid #f2f2f2}.el-pagination.el-pagination-override>.el-pager .number{min-width:30px;height:30px;background:#fff;border:1px solid #f2f2f2}.el-pagination.el-pagination-override>.el-pager .number.active,.el-pagination.el-pagination-override>.el-pager .number:hover{background-color:#bc423f!important;color:#fff!important}.el-dialog__wrapper.el-dialog-override .el-dialog__body{padding:0}.el-dialog__wrapper.el-dialog-override .el-dialog__header{height:55px;display:flex;align-items:center;padding:0 20px}.el-dialog__wrapper.el-dialog-override .el-dialog__header .el-dialog__title{font-size:14px;font-weight:700}.el-dialog__wrapper.el-dialog-override .el-dialog__header .el-dialog__headerbtn{top:none}.el-dialog-override .el-dialog{position:absolute;margin:0!important;width:550px!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important}.form-box,.form-wrap{max-height:calc(100vh - 200px);overflow:auto;border-top:1px solid #f0f0f0}.el-date-picker,.el-input,.el-select{flex:1}.el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#bc423f!important;border-color:#bc423f!important}.form-row,.preach-list li{flex-shrink:0}