2-16新增

pages.json

@@ -474,6 +474,33 @@
             }
             
         }
+        ,{
+            "path" : "pages/index/video-column/video-column",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "视频专栏",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/my-custom/my-custom",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "我的定制",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/gift-choice/gift-choice",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "礼品心选",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/index/gift-choice/gift-choice.css

@@ -0,0 +1,134 @@
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.bg {
+	width: 100%;
+}
+
+.top-module {
+	width: 100%;
+	border-radius: 32rpx 32rpx 0 0;
+	background: linear-gradient(180deg, #FFFFFF, #F8F8F8, #FFFFFF);
+	margin-top: -20rpx;
+	z-index: 10;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding: 20rpx 24rpx 4rpx;
+	box-sizing: border-box;
+	margin-bottom: 30rpx;
+}
+
+.top-module-item {
+	width: calc(50% - 11rpx);
+	height: fit-content;
+	display: flex;
+	flex-direction: column;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	margin-bottom: 20rpx;
+	padding: 0 22rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.top-module-item-name {
+	width: 100%;
+	height: 82rpx;
+	display: flex;
+	align-items: center;
+	color: #202020;
+	font-size: 32rpx;
+}
+
+.top-module-item-img {
+	width: 100%;
+	height: 234rpx;
+	border-radius: 8rpx;
+}
+.product-item-column2 {
+	width: 100%;
+	height: 100%;
+	border-radius: 12rpx;
+	display: flex;
+	flex-direction: column;
+}
+
+.product-item-column2-img {
+	width: 100%;
+	height: 340rpx;
+	border-radius: 12rpx 12rpx 0 0;
+}
+
+.product-item-column2-bottom {
+	width: 100%;
+	height: calc(100% - 340rpx);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: 16rpx;
+	box-sizing: border-box;
+	border-radius: 0 0 12rpx 12rpx;
+}
+
+.product-item-column-name2 {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-weight: bold;
+	font-size: 26rpx;
+}
+
+.product-item-column2-row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.product-item-column2-btn {
+	width: 40rpx;
+	height: 40rpx;
+	line-height: 40rpx;
+	border-radius: initial;
+}
+
+.product-item-column2-btn image {
+	width: 100%;
+	height: 100%;
+}
+
+.product-item-column2-price {
+	color: #F2501A;
+	font-size: 28rpx;
+}
+
+.product-item-column2-price>text {
+	color: #919191;
+	font-size: 24rpx;
+	margin-left: 6rpx;
+	text-decoration: line-through;
+}
+
+.product-list {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+}
+
+.product-item {
+	width: calc(50% - 11rpx);
+	height: 500rpx;
+	border-radius: 12rpx;
+	background-color: #fff;
+	margin-bottom: 30rpx;
+}

pages/index/gift-choice/gift-choice.vue

@@ -0,0 +1,94 @@
+<!-- 礼品心选 -->
+<template>
+	<view class="wrap">
+		<image src="../../../static/bg-11.png" mode="widthFix" class="bg"></image>
+		<view class="top-module">
+			<view class="top-module-item">
+				<view class="top-module-item-name">送长辈</view>
+				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
+			</view>
+			<view class="top-module-item">
+				<view class="top-module-item-name">送长辈</view>
+				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
+			</view>
+			<view class="top-module-item">
+				<view class="top-module-item-name">送长辈</view>
+				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
+			</view>
+			<view class="top-module-item">
+				<view class="top-module-item-name">送长辈</view>
+				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
+			</view>
+		</view>
+		<view class="product-list">
+			<view class="product-item">
+				<view class="product-item-column2">
+					<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill"></image>
+					<view class="product-item-column2-bottom">
+						<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96%  美白神器</view>
+						<view class="product-item-column2-row-between">
+							<view class="product-item-column2-price">
+								￥394.00
+								<text>￥34.00</text>
+							</view>
+							<button type="default" class="product-item-column2-btn">
+								<image src="../../../static/add-icon.png" mode=""></image>
+							</button>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="product-item">
+				<view class="product-item-column2">
+					<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill"></image>
+					<view class="product-item-column2-bottom">
+						<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96%  美白神器</view>
+						<view class="product-item-column2-row-between">
+							<view class="product-item-column2-price">
+								￥394.00
+								<text>￥34.00</text>
+							</view>
+							<button type="default" class="product-item-column2-btn">
+								<image src="../../../static/add-icon.png" mode=""></image>
+							</button>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="product-item">
+				<view class="product-item-column2">
+					<image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill"></image>
+					<view class="product-item-column2-bottom">
+						<view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96%  美白神器</view>
+						<view class="product-item-column2-row-between">
+							<view class="product-item-column2-price">
+								￥394.00
+								<text>￥34.00</text>
+							</view>
+							<button type="default" class="product-item-column2-btn">
+								<image src="../../../static/add-icon.png" mode=""></image>
+							</button>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./gift-choice.css";
+</style>

pages/index/my-custom/my-custom.css

@@ -0,0 +1,337 @@
+page {
+	background-color: #F6F6F6;
+}
+
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 65rpx 24rpx 0;
+	box-sizing: border-box;
+}
+
+.tab-list {
+	width: 100%;
+	height: 65rpx;
+	display: flex;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 999;
+	background-color: #F6F6F6;
+}
+
+.child {
+	flex: 1;
+	height: 65rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 30rpx;
+	color: #202020;
+}
+
+.child.active {
+	color: #F2501A;
+	font-weight: bold;
+}
+
+.list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.item {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 24rpx 24rpx 0;
+	box-sizing: border-box;
+	background-color: #fff;
+	border-radius: 16rpx;
+	margin-bottom: 22rpx;
+}
+
+.item-top {
+	width: 100%;
+	height: 90rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.item-top text:first-child {
+	color: #111111;
+	font-size: 30rpx;
+	font-weight: bold;
+}
+
+.item-top text:last-child {
+	color: #F2501A;
+	font-size: 30rpx;
+}
+
+.item-bottom {
+	width: 100%;
+	height: 108rpx;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	position: relative;
+}
+
+.item-bottom button {
+	width: 168rpx;
+	height: 60rpx;
+	line-height: 60rpx;
+	border-radius: 100rpx;
+	background-color: #F2501A;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	color: #fff;
+	font-size: 24rpx;
+	margin-right: 14rpx;
+}
+
+.item-bottom button:last-child {
+	margin-right: 0;
+}
+
+.border-red {
+	border: 1px solid #E63D23 !important;
+	color: #F2501A !important;
+}
+
+.border-gray {
+	border: 1px solid #9D9D9D !important;
+	color: #777777 !important;
+}
+
+.price-row {
+	width: 100%;
+	text-align: right;
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.big-font {
+	font-size: 38rpx;
+	font-weight: bold;
+}
+
+.big-font-black {
+	font-size: 38rpx;
+	color: #202020;
+	font-weight: bold;
+}
+
+.margin {
+	margin-right: 10rpx;
+}
+
+.margin:last-child {
+	margin: 0;
+}
+
+.item-content {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	margin-bottom: 20rpx;
+}
+
+.product-img {
+	width: 188rpx;
+	height: 188rpx;
+	border-radius: 12rpx;
+	margin-right: 22rpx;
+}
+
+.item-content-sidebar {
+	flex: 1;
+	height: 188rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.row-between {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.product-item-name {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	color: #202020;
+	font-size: 28rpx;
+}
+
+.row-end {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.product-item-price {
+	color: #202020;
+	font-size: 26rpx;
+}
+
+.product-item-num {
+	color: #A7A7A7;
+	font-size: 20rpx;
+}
+
+.product-item-num text {
+	font-size: 24rpx;
+}
+
+.product-item-tag {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.product-item-msg {
+	width: 100%;
+	color: #F2501A;
+	font-size: 20rpx;
+}
+
+.status-msg {
+	color: #FFBD0B;
+	font-size: 30rpx;
+}
+
+.freight-insurance-row {
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	font-size: 24rpx;
+	margin-bottom: 20rpx;
+}
+
+.msg-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-top: 40rpx;
+}
+
+.font-1 {
+	color: #202020;
+	font-size: 24rpx;
+	margin-right: 58rpx;
+}
+
+.font-2 {
+	color: #A7A7A7;
+	font-size: 24rpx;
+	margin-right: 108rpx;
+}
+
+.font-3 {
+	color: #202020;
+	font-size: 24rpx;
+}
+
+.normal-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: #999999;
+	font-size: 26rpx;
+	padding: 200rpx 0;
+}
+
+.normal-box image {
+	width: 580rpx;
+	margin-bottom: 14rpx;
+}
+
+.normal-box button {
+	width: 152rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid #F2501A;
+	border-radius: 100rpx;
+	box-sizing: border-box;
+	color: #F2501A;
+	font-size: 28rpx;
+	margin-top: 10rpx;
+}
+
+.product-item-remark {
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.fangkuai {
+	width: 28rpx;
+	height: 28rpx;
+	border-radius: 6rpx;
+	background-color: #fff;
+	border: 1px solid #E63D23;
+	box-sizing: border-box;
+	position: relative;
+}
+
+.fangkuai::after {
+	position: absolute;
+	content: "";
+	width: 24rpx;
+	height: 24rpx;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	border-radius: 6rpx;
+	background-color: #E63D23;
+}
+
+.color-box {
+	display: flex;
+	align-items: center;
+}
+
+.color-box text {
+	color: #A7A7A7;
+	font-size: 24rpx;
+	margin-right: 6rpx;
+}
+
+.date-time {
+	color: #A7A7A7;
+	font-size: 24rpx;
+	position: absolute;
+	left: 0;
+	top: 12rpx;
+}
+.express-information{
+	color: #202020;
+	font-size: 24rpx;
+	position: absolute;
+	left: 0;
+	bottom: 15rpx;
+}
+.num {
+	color: #A7A7A7;
+	font-size: 24rpx;
+}

pages/index/my-custom/my-custom.vue

@@ -0,0 +1,96 @@
+<!-- 我的定制 -->
+<template>
+	<view class="wrap">
+
+		<view class="tab-list">
+			<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList" :key="index"
+				@click="checked(index)">
+				{{item.title}}
+			</view>
+		</view>
+
+		<view class="list">
+			<view class="item">
+				<view class="item-content">
+					<image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
+					<view class="item-content-sidebar">
+						<view class="product-item-name">
+							冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
+						</view>
+						<view class="product-item-tag">
+							<text>一盒15g*20袋</text>
+							<text class="product-item-price">￥394.00</text>
+						</view>
+						<view class="row-between">
+							<view class="color-box">
+								<text>颜色:</text>
+								<view class="fangkuai"></view>
+							</view>
+							<text class="num">x4</text>
+						</view>
+						<view class="product-item-remark">
+							备注:需要大量定制，用于元旦送给VIP客户
+						</view>
+					</view>
+				</view>
+				
+				<view class="item-bottom">
+					<text class="date-time">2021-11-16</text>
+					<text class="express-information">中通快递:ZT456789415213</text>
+					<!-- 待确认显示 -->
+					<button type="default">确认</button>
+					<!-- 待付款显示 -->
+					<!-- <button type="default">去支付</button> -->
+					<!-- 待发货显示 -->
+					<!-- <button type="default">催发货</button> -->
+					<!-- 待收货显示 -->
+					<!-- <button type="default">确认收货</button> -->
+				</view>
+			</view>
+			<!-- 无内容时显示 -->
+			<!-- <view class="normal-box">
+				<image src="../../../static/normal-3.png" mode="widthFix"></image>
+				<text>暂无订单</text>
+				<button type="default">去逛逛</button>
+			</view> -->
+
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//选项卡
+				isActive: 0,
+				navList: [{
+					index: 0,
+					title: '待确认',
+				}, {
+					index: 1,
+					title: "待付款",
+				}, {
+					index: 2,
+					title: "待发货",
+				}, {
+					index: 3,
+					title: "待收货",
+				}],
+			}
+		},
+		methods: {
+			//选项卡
+			checked(index) {
+				this.isActive = index
+			},
+
+		}
+	}
+</script>
+
+
+<style scoped lang="scss">
+	@import "./my-custom.css";
+</style>

pages/index/video-column/video-column.css

@@ -0,0 +1,202 @@
+.wrap {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 92rpx 24rpx 24rpx;
+	box-sizing: border-box;
+}
+
+.content-box {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.tab-list {
+	width: 100%;
+	display: flex;
+	background-color: #fff;
+	border-top: 1px solid #F6F6F6;
+	box-sizing: border-box;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 999;
+}
+
+.child {
+	flex: 1;
+	height: 72rpx;
+	line-height: 72rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #202020;
+	font-size: 32rpx;
+	position: relative;
+}
+
+.border-img {
+	width: 15rpx;
+	opacity: 0;
+	position: absolute !important;
+	right: 70rpx !important;
+	bottom: 10rpx !important;
+}
+
+.child.active .border-img {
+	opacity: 1;
+}
+
+.child.active {
+	color: #F2501A;
+	font-weight: 500;
+}
+
+.video-module {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	overflow: hidden;
+}
+
+.video-title {
+	width: 100%;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	height: 76rpx;
+	line-height: 76rpx;
+	color: #202020;
+	font-size: 28rpx;
+	font-weight: bold;
+	padding: 0 14rpx;
+	box-sizing: border-box;
+}
+
+.list {
+	width: 100%;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	margin-top: 20rpx;
+	padding-bottom: 50rpx;
+}
+
+.item {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 28rpx 20rpx 0;
+	box-sizing: border-box;
+	margin-bottom: 20rpx;
+}
+
+.item:last-child {
+	margin-bottom: 0;
+}
+
+.item-top {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.img-box {
+	display: flex;
+	align-items: center;
+	margin-left: 24rpx;
+	position: relative;
+}
+
+.item-top-img {
+	width: 210rpx;
+	height: 168rpx;
+	border-radius: 16rpx;
+}
+
+.item-top-sidebar {
+	flex: 1;
+	height: 150rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.item-top-name {
+	width: 100%;
+	color: #202020;
+	font-size: 28rpx;
+	font-weight: bold;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+}
+
+.item-top-msg {
+	width: 100%;
+	color: #A7A7A7;
+	font-size: 24rpx;
+}
+
+.play-img {
+	width: 48rpx;
+	height: 48rpx;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 10;
+}
+
+.list-2 {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding: 20rpx 20rpx 0;
+	box-sizing: border-box;
+	background-color: #FFFFFF;
+	border-radius: 16rpx;
+	margin-top: 20rpx;
+}
+
+.item-2 {
+	width: calc(50% - 10rpx);
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 20rpx;
+}
+
+.img-box2 {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	position: relative;
+	margin-bottom: 10rpx;
+}
+
+.item-img2 {
+	width: 100%;
+	height: 252rpx;
+	border-radius: 12rpx 12rpx 0 0;
+}
+
+.item-bottom {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.item-bottom-msg {
+	width: 100%;
+	color: #A7A7A7;
+	font-size: 24rpx;
+	margin-top: 2rpx;
+}

pages/index/video-column/video-column.vue

@@ -0,0 +1,141 @@
+<!-- 视频专栏 -->
+<template>
+	<view class="wrap">
+
+		<view class="tab-list">
+			<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList" :key="index"
+				@click="checked(index)">
+				{{item.title}}
+				<image src="../../../static/border.png" class="border-img" mode="widthFix"></image>
+			</view>
+		</view>
+
+		<view class="content-box" v-if="isActive == 0">
+			<view class="video-module">
+				<video id="myVideo"
+					src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
+					enable-danmu controls style="width: 100%;height: 262rpx;"></video>
+				<view class="video-title">
+					时令养生到底怎么去养生？
+				</view>
+			</view>
+
+			<view class="list">
+				<view class="item">
+					<view class="item-top">
+						<view class="item-top-sidebar">
+							<view class="item-top-name">大暑已到易伤津耗气，可用药粥滋补身体</view>
+							<view class="item-top-msg">
+								3.2万人浏览
+							</view>
+						</view>
+						<view class="img-box">
+							<image src="../../../static/img-4.png" class="item-top-img" mode="aspectFill"></image>
+							<image src="../../../static/play.png" class="play-img"></image>
+						</view>
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-top">
+						<view class="item-top-sidebar">
+							<view class="item-top-name">大暑已到易伤津耗气，可用药粥滋补身体</view>
+							<view class="item-top-msg">
+								3.2万人浏览
+							</view>
+						</view>
+						<view class="img-box">
+							<image src="../../../static/img-4.png" class="item-top-img" mode="aspectFill"></image>
+							<image src="../../../static/play.png" class="play-img"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="content-box" v-if="isActive == 1">
+			<view class="video-module">
+				<video id="myVideo"
+					src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
+					enable-danmu controls style="width: 100%;height: 262rpx;"></video>
+				<view class="video-title">
+					时令养生到底怎么去养生？
+				</view>
+			</view>
+			<view class="list-2">
+				<view class="item-2">
+					<view class="img-box2">
+						<image src="../../../static/img-4.png" class="item-img2" mode="aspectFill"></image>
+						<image src="../../../static/play.png" class="play-img"></image>
+					</view>
+					<view class="item-bottom">
+						<view class="item-top-name">大暑已到易伤津耗气，可用药粥滋补身体</view>
+						<view class="item-bottom-msg">
+							3.2万人浏览
+						</view>
+					</view>
+				</view>
+				<view class="item-2">
+					<view class="img-box2">
+						<image src="../../../static/img-4.png" class="item-img2" mode="aspectFill"></image>
+						<image src="../../../static/play.png" class="play-img"></image>
+					</view>
+					<view class="item-bottom">
+						<view class="item-top-name">大暑已到易伤津耗气，可用药粥滋补身体</view>
+						<view class="item-bottom-msg">
+							3.2万人浏览
+						</view>
+					</view>
+				</view>
+				<view class="item-2">
+					<view class="img-box2">
+						<image src="../../../static/img-4.png" class="item-img2" mode="aspectFill"></image>
+						<image src="../../../static/play.png" class="play-img"></image>
+					</view>
+					<view class="item-bottom">
+						<view class="item-top-name">大暑已到易伤津耗气，可用药粥滋补身体</view>
+						<view class="item-bottom-msg">
+							3.2万人浏览
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="content-box" v-if="isActive == 2">
+
+		</view>
+
+	</view>
+</template>
+
+<script>
+	;
+	export default {
+		data() {
+			return {
+				//选项卡
+				isActive: 1,
+				navList: [{
+					index: 0,
+					title: '资讯',
+				}, {
+					index: 1,
+					title: "养生",
+				}, {
+					index: 2,
+					title: "产品"
+				}]
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			checked(index) {
+				this.isActive = index
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "./video-column.css";
+</style>