商城页面uniapp

<template>
	<view class="">
		<!-- 头部 -->
		<view class="nav_header">
		    <view class="nav_search">
		        <view class="form">
		            <input  placeholder="输入关键字 搜索文章" class="input"> 
					<view class="zt"><i class="iconfont icon-chacha"></i></view>
		            <view class="button"><i class="iconfont icon-sousuo"></i></view>
		        </view>
		    </view>
		    <view class="tis">今日新增：10条 昨日新增：10条 总计：120798条</view>
		    <view id="TouchNav">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view class="scroll-view-item_H">全部</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
				</scroll-view>
		    </view>
		</view>
		<!-- 幻灯片 -->
		<view class="huandeng">
			<swiper class="swiper" 
				indicator-dots="indicatorDots" 
				autoplay="autoplay" 
				interval="interval" 
				duration="duration">
				<template v-for="(it,i) in huandeng">
					<swiper-item @click="goToPage(it.url)">
						<image :src="it.icon" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</template>
			</swiper>
		</view>
		<!-- 导师 -->
		<view class="rxds">
		    <view class="title">
		        <view class="h2">热心导师</view>
		        <view class="span">带给您快乐心情</view>
		    </view>
		    <view class="rongqi">
		        <view class="div" v-for="(it,i) in daoshi"  @click="goToPage(it.url)">
		            <view class="you">
		                <view class="biaoti">{{it.title}}</view>
		                <view class="miaoshu">{{it.msg}}</view>
		                <view class="go">
							go! <i class="iconfont icon-youjiantou"></i>
		                </view>
		            </view>
		            <view class="zuo">
		                <image :src="it.icon" class="img" mode="widthFix"></image>
		            </view>
		        </view>
		    </view>
		</view>
		<!-- 列表 -->
		<view class="shop">
			<!-- 左边 -->
		    <view class="div">
		        <view class="you">
					<image src="http://tupian.haolianai.cn/2023-11-06_6548a5d8aed36.jpg" class="img" mode="widthFix"></image>
		        </view>
		        <view class="zuo wz">
		            <view class="title">小心导师 提供倾诉 倾听 开导 安慰服务</view>
		            <view class="jiages">￥100.00</view>
		            <view class="xia">
		                <view class="zuo">
							￥<text class="span">50.00</text>
		                </view>
		                <view class="you">销量：35</view>
		            </view>
		        </view>
		    </view>
			<!-- 右边 -->
			<view class="div">
			    <view class="zuo">
					<image src="http://tupian.haolianai.cn/2023-11-06_6548a5d8aed36.jpg" class="img" mode="widthFix"></image>
			    </view>
			    <view class="you wz">
			        <view class="title">小心导师 提供倾诉 倾听 开导 安慰服务</view>
			        <view class="jiages">￥100.00</view>
			        <view class="xia">
			            <view class="zuo">
							￥<text class="span">50.00</text>
			            </view>
			            <view class="you">销量：35</view>
			        </view>
			    </view>
			</view>
			<!-- 上边 -->
			<view class="div">
			    <view class="shang1">
					<image src="http://tupian.haolianai.cn/2023-11-06_6548a5d8aed36.jpg" class="img" mode="widthFix"></image>
			    </view>
			    <view class="xia">
			        <view class="title">小心导师 提供倾诉 倾听 开导 安慰服务</view>
					<view class="jiages">￥100.00</view>
			        <view class="xia">
			            <view class="zuo">
							￥<text class="span">50.00</text>
			            </view>
			            <view class="you">销量：35</view>
			        </view>
			    </view>
			</view>
			<view class="div">
			    <view class="shang2">
					<image src="http://tupian.haolianai.cn/2023-11-06_6548a5d8aed36.jpg" class="img" mode="widthFix"></image>
					<image src="http://tupian.haolianai.cn/2023-11-06_6548a5d8aed36.jpg" class="img" mode="widthFix"></image>
			    </view>
			    <view class="xia">
			        <view class="title">小心导师 提供倾诉 倾听 开导 安慰服务</view>
					<view class="jiages">￥100.00</view>
			        <view class="xia">
			            <view class="zuo">
							￥<text class="span">50.00</text>
			            </view>
			            <view class="you">销量：35</view>
			        </view>
			    </view>
			</view>
			<view class="div">
			    <view class="shang3">
					<image src="http://tupian.haolianai.cn/2023-11-06_6548a5d8aed36.jpg" class="img" mode="widthFix"></image>
					<image src="http://tupian.haolianai.cn/2023-11-06_6548a5d8aed36.jpg" class="img" mode="widthFix"></image>
					<image src="http://tupian.haolianai.cn/2023-11-06_6548a5d8aed36.jpg" class="img" mode="widthFix"></image>
			    </view>
			    <view class="xia">
			        <view class="title">小心导师 提供倾诉 倾听 开导 安慰服务</view>
					<view class="jiages">￥100.00</view>
			        <view class="xia">
			            <view class="zuo">
							￥<text class="span">50.00</text>
			            </view>
			            <view class="you">销量：35</view>
			        </view>
			    </view>
			</view>
	 
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            huandeng: [
					
					{
						'url':'/pages/index/index',
						'icon':'/static/img/banner.jpg',
					},
					{
						'url':'/pages/index/index',
						'icon':'/static/img/banner.jpg',
					}
				],
				daoshi:[
					{
						'url':'/pages/index/index',
						'icon':'/static/img/tuijian.png',
						'title':'推荐导师',
						'msg':'诚意推荐您 优质导师'
					},
					{
						'url':'/pages/index/index',
						'icon':'/static/img/remen.png',
						'title':'热门导师',
						'msg':'诚意推荐您 优质导师'
					},
					{
						'url':'/pages/index/index',
						'icon':'/static/img/xinjin.png',
						'title':'新进导师',
						'msg':'诚意推荐您 优质导师'
					},
					{
						'url':'/pages/index/index',
						'icon':'/static/img/cuxiaos.png',
						'title':'推荐导师',
						'msg':'诚意推荐您 优质导师'
					}
				],			
				title: '首页'
	        }
	    },
	    onShow() {
			uni.setNavigationBarTitle({
			　　title:this.title
			})
	        this.item()
		},
	    methods: {
	        item() { 
				// 加载消息
				uni.request({
					url:uni.getStorageSync('www')+'/index.php/app/quan/msg_index.html?time=0',
					data: {
						uid: uni.getStorageSync('uid'),
						mifenlei: uni.getStorageSync('mifenlei'),
					}, 
					method: 'POST', 
					success: (res) => {

					}
				});
			}
	    }
	}
</script>

<style>
page {
	background-color: #f2f5f9
}

.nav_header {
	background-color: #ff4786;
	position: fixed;
	width: 100%;
	z-index: 999;
	left: 0;
	right: 0;
	top: 0;
	padding-top: var(--status-bar-height)
}

.nav_header .tis {
	padding-bottom: 20rpx;
	text-align: center;
	color: #fff;
	font-size: 12px
}

.nav_search {
	margin: auto;
	background-color: #ff4786;
	width: calc(100% - 20rpx);
	padding: 20rpx;
	position: relative;
	z-index: 99
}

.nav_search .form {
	overflow: auto;
	position: relative;
	width: calc(100% - 20rpx)
}

.nav_search .zt {
	color: #ff4786;
	border-radius: 100rpx;
	text-align: center;
	position: absolute;
	padding: 8rpx;
	line-height: 32rpx;
	width: 32rpx;
	right: 88rpx;
	top: 12rpx;
	z-index: 9999;
}

.nav_search .input {
	padding: 0 16rpx;
	font-size: 28rpx;
	width: calc(100% - 32rpx);
	height: 76rpx;
	float: right;
	border-radius: 100rpx;
	background-color: #fff
}

.nav_search .sxbut {
	font-size: 24rpx;
	color: #f0f8ff;
	height: 56rpx;
	line-height: 40rpx;
	text-align: center
}

.nav_search .sxbut .xzso {
	padding: 0 14rpx;
	border-radius: 10rpx;
	border: 2rpx solid #fff;
	margin: 0 6rpx
}

.nav_search .button {
	position: absolute;
	background: #ff4786;
	font-size: 28rpx;
	width: 76rpx;
	line-height: 60rpx;
	color: #fff;
	text-align: center;
	border-radius: 100rpx;
	right: 6rpx;
	z-index: 9999;
	top: 8rpx
}

#TouchNav {
	width: 100%;
	border-bottom: 2rpx solid #f8f8f8;
	background-color: #fff;
	padding: 10rpx 0rpx
}

.scroll-Y {
	height: 300rpx
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%
}

.scroll-view-item {
	height: 30rpx;
	line-height: 30rpx;
	text-align: center;
	font-size: 36rpx
}

.scroll-view-item_H {
	display: inline-block;
	width: 100rpx;
	height: 30rpx;
	line-height: 30rpx;
	text-align: center;
	font-size: 32rpx
}

.huandeng {
	margin-top: 252rpx;
	padding-top: var(--status-bar-height)
}

.rxds {
	position: relative;
	margin-top: 20rpx;
	padding: 20rpx;
	background-color: #fff
}

.rxds .title {
	position: relative
}

.rxds .title .h2 {
	color: #ff4786;
	font-size: 44rpx;
	font-weight: 700
}

.rxds .title .span {
	position: absolute;
	top: 12rpx;
	margin-left: 200rpx;
	border-radius: 30rpx 0 30rpx 0;
	background-color: #ff4786;
	color: #f0f8ff;
	font-size: 24rpx;
	line-height: 40rpx;
	padding: 0 32rpx
}

.rxds .rongqi {
	overflow: auto;
	width: calc(100% + 20rpx)
}

.rxds .rongqi .div {
	display: block;
	border-radius: 20rpx;
	background-color: #efefef;
	padding: 20rpx;
	width: calc(50% - 60rpx);
	margin-right: 20rpx;
	margin-top: 20rpx;
	float: left;
	overflow: auto
}

.rxds .rongqi .div .you {
	float: left;
	width: calc(100% - 120rpx)
}

.rxds .rongqi .div .zuo {
	float: right;
	width: 100rpx
}

.rxds .rongqi .div .you .biaoti {
	font-size: 32rpx;
	font-weight: 600
}

.rxds .rongqi .div .you .miaoshu {
	color: #959696;
	font-size: 28rpx;
	line-height: 34rpx
}

.rxds .rongqi .div .you .go {
	border-radius: 100rpx;
	background-color: #08f;
	color: #f0f8ff;
	position: relative;
	padding: 0 16rpx;
	text-transform: uppercase;
	font-style: oblique;
	font-weight: 700;
	margin-top: 10rpx;
	width: 120rpx
}

.rxds .rongqi .div:nth-child(2) .you .go {
	background-color: #ff5722
}

.rxds .rongqi .div:nth-child(3) .you .go {
	background-color: #02ad09
}

.rxds .rongqi .div:nth-child(4) .you .go {
	background-color: #ff9800
}

.rxds .rongqi .you .go i {
	background-color: #fff;
	width: 30rpx;
	height: 30rpx;
	line-height: 30rpx;
	color: #08f;
	text-align: center;
	border-radius: 100rpx;
	float: right;
	margin-top: 8rpx
}

.rxds .rongqi .div:nth-child(2) .you .go i {
	color: #ff5722
}

.rxds .rongqi .div:nth-child(3) .you .go i {
	color: #02ad09
}

.rxds .rongqi .div:nth-child(4) .you .go i {
	color: #ff9800
}

.rxds .zuo {
	float: right;
	width: 40%
}

.rxds .zuo .img {
	width: 100%
}

.shop {
	margin-top: 20rpx
}

.shop .div {
	display: block;
	background-color: #fff;
	padding: 20rpx;
	margin-bottom: 20rpx;
	overflow: auto
}

.shop .div .img {
	width: 100%;
	border-radius: 20rpx
}

.shop .div .title {
	font-size: 32rpx;
	margin-top: 20rpx
}

.shop .div .jiages {
	text-decoration: line-through;
	color: #c5c5c5
}

.shop .div .xia {
	overflow: auto
}

.shop .div .xia .zuo {
	color: #ff4786;
	font-weight: 700;
	float: left
}

.shop .div .xia .zuo .span {
	font-size: 40rpx
}

.shop .div .xia .you {
	float: right
}

.shop .div>.you {
	float: right;
	width: 200rpx
}

.shop .div>.zuo {
	float: left;
	width: 200rpx
}

.shop .div>.wz {
	width: calc(100% - 240rpx)
}

.shop .div>.shang1 {
	height: 100%;
	overflow: hidden
}

.shop .div>.shang2 {
	height: 100%;
	overflow: hidden;
	width: calc(100% + 20rpx)
}

.shop .div>.shang2 .img {
	float: left;
	width: calc(50% - 20rpx);
	margin-right: 20rpx
}

.shop .div>.shang3 {
	height: 100%;
	overflow: hidden;
	width: calc(100% + 20rpx)
}

.shop .div>.shang3 .img {
	float: left;
	width: calc(33.3333% - 20rpx);
	margin-right: 20rpx;
	border-radius: 20rpx
}

</style>
分类: UNIAPP 点赞(0) 收藏
评论列表（0）
觅新博客

觅新科技 - 定制各种网站 app 小程序解决方案QQ50361804

商城页面uniapp

评论

公告

搜索

阅读排行榜

站长推荐

随机推荐
