Compare commits
No commits in common. 'master' and 'master' have entirely different histories.
@ -1,40 +1,21 @@
|
|||||||
<!-- 商品详情页面的根容器 -->
|
|
||||||
<view class="details">
|
<view class="details">
|
||||||
<!-- 商品顶部图片，使用宽度自适应模式 -->
|
|
||||||
<image class="topimage" mode="widthFix" src="{{ goodsDetails.topimage }}"></image>
|
<image class="topimage" mode="widthFix" src="{{ goodsDetails.topimage }}"></image>
|
||||||
|
|
||||||
<!-- 商品基本信息容器 -->
|
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- 商品价格显示 -->
|
|
||||||
<view class="price">
|
<view class="price">
|
||||||
￥<text>{{ goodsDetails.price }}</text>.00
|
￥<text>{{ goodsDetails.price }}</text>.00
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 商品标题显示 -->
|
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<text>{{ goodsDetails.title }}</text>
|
<text>{{ goodsDetails.title }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 商品详细介绍图片，使用宽度自适应模式 -->
|
|
||||||
<view class="introduce">
|
<view class="introduce">
|
||||||
<image mode="widthFix" src="{{ goodsDetails.details }}"></image>
|
<image mode="widthFix" src="{{ goodsDetails.details }}"></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 商品操作栏容器 -->
|
|
||||||
<view class="cart">
|
<view class="cart">
|
||||||
<!-- Vant 商品操作栏组件 -->
|
|
||||||
<van-goods-action>
|
<van-goods-action>
|
||||||
<!-- 客服图标按钮，点击时触发 onClickKF 事件 -->
|
|
||||||
<van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickKF" />
|
<van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickKF" />
|
||||||
|
|
||||||
<!-- 购物车图标按钮，点击时触发 onClickCart 事件 -->
|
|
||||||
<van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickCart" />
|
<van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickCart" />
|
||||||
|
|
||||||
<!-- 加入购物车按钮，点击时触发 onClickAddCart 事件 -->
|
|
||||||
<van-goods-action-button text="加入购物车" type="warning" bind:click="onClickAddCart" />
|
<van-goods-action-button text="加入购物车" type="warning" bind:click="onClickAddCart" />
|
||||||
|
|
||||||
<!-- 立即购买按钮，点击时触发 onClickBuy 事件，并传递商品 ID -->
|
|
||||||
<van-goods-action-button data-id="{{ goodsDetails.id }}" text="立即购买" bind:click="onClickBuy" />
|
<van-goods-action-button data-id="{{ goodsDetails.id }}" text="立即购买" bind:click="onClickBuy" />
|
||||||
</van-goods-action>
|
</van-goods-action>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@ -1,39 +1,32 @@
|
|||||||
/* 商品详情页面的整体样式 */
|
|
||||||
.details{
|
.details{
|
||||||
background: #fff; /* 设置背景颜色为白色 */
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商品顶部图片的样式 */
|
|
||||||
.details .topimage{
|
.details .topimage{
|
||||||
width: 100%; /* 图片宽度占满父容器 */
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商品基本信息容器的样式 */
|
|
||||||
.details .content{
|
.details .content{
|
||||||
margin: 10px; /* 设置外边距为 10px */
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商品价格的样式 */
|
|
||||||
.details .content .price {
|
.details .content .price {
|
||||||
color: #f2270c; /* 设置价格文字颜色为红色 */
|
color: #f2270c;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商品价格中的文本样式 */
|
|
||||||
.details .content .price text{
|
.details .content .price text{
|
||||||
color: #f2270c; /* 设置价格文字颜色为红色 */
|
color: #f2270c;
|
||||||
display: inline-block; /* 使文本块级显示，方便设置其他样式 */
|
display: inline-block;
|
||||||
font-family: JDZH-Regular; /* 设置字体为 JDZH-Regular */
|
font-family: JDZH-Regular;
|
||||||
font-size: 20px; /* 设置字体大小为 20px */
|
font-size: 20px;
|
||||||
line-height: 30px; /* 设置行高为 30px */
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商品标题的样式 */
|
|
||||||
.details .content .title{
|
.details .content .title{
|
||||||
font-size: 15px; /* 设置字体大小为 15px */
|
font-size: 15px;
|
||||||
font-weight: 700; /* 设置字体加粗 */
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 商品详细介绍图片的样式 */
|
|
||||||
.details .introduce image{
|
.details .introduce image{
|
||||||
width: 100%; /* 图片宽度占满父容器 */
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -1,31 +1,19 @@
|
|||||||
<view class="index-container"> <!-- 整个页面的容器 -->
|
<view class="index-container">
|
||||||
<view class="header"> <!-- 头部区域 -->
|
<view class="header">
|
||||||
<van-search
|
<van-search bindtap="clickSearch" disabled bind:focus="clickSearch" value="{{ value }}" shape="round" background="#fa2c19" placeholder="请输入搜索关键词" />
|
||||||
bindtap="clickSearch" <!-- 点击搜索框时触发 clickSearch 方法 -->
|
|
||||||
disabled <!-- 搜索框禁用 -->
|
|
||||||
bind:focus="clickSearch" <!-- 搜索框获得焦点时触发 clickSearch 方法 -->
|
|
||||||
value="{{ value }}" <!-- 搜索框的值绑定到 value 变量 -->
|
|
||||||
shape="round" <!-- 搜索框形状为圆角 -->
|
|
||||||
background="#fa2c19" <!-- 搜索框背景颜色 -->
|
|
||||||
placeholder="请输入搜索关键词" /> <!-- 搜索框占位符文本 -->
|
|
||||||
<!-- 轮播图 -->
|
<!-- 轮播图 -->
|
||||||
<swiper
|
<swiper swiperData="{{ swiperData }}" indicatorDots="{{ swiperOptions.indicatorDots }}" autoplay="{{ swiperOptions.autoplay }}" interval="{{ swiperOptions.interval }}" duration="{{ swiperOptions.duration }}"></swiper>
|
||||||
swiperData="{{ swiperData }}" <!-- 轮播图数据绑定到 swiperData 变量 -->
|
|
||||||
indicatorDots="{{ swiperOptions.indicatorDots }}" <!-- 是否显示面板指示点 -->
|
|
||||||
autoplay="{{ swiperOptions.autoplay }}" <!-- 是否自动切换 -->
|
|
||||||
interval="{{ swiperOptions.interval }}" <!-- 自动切换时间间隔 -->
|
|
||||||
duration="{{ swiperOptions.duration }}"> <!-- 滑动动画时长 -->
|
|
||||||
</swiper>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="nav"> <!-- 导航区域 -->
|
<view class="nav">
|
||||||
<van-grid column-num="4"> <!-- 4列的网格布局 -->
|
<van-grid column-num="4">
|
||||||
<van-grid-item
|
<van-grid-item
|
||||||
wx:key="index" <!-- 每个网格项的唯一标识 -->
|
wx:key="index"
|
||||||
icon-color="{{ item.color }}" <!-- 图标颜色 -->
|
icon-color="{{ item.color }}"
|
||||||
icon="{{ item.icon }}" <!-- 图标名称 -->
|
icon="{{ item.icon }}"
|
||||||
text="{{ item.text }}" <!-- 文本内容 -->
|
text="{{ item.text }}"
|
||||||
wx:for="{{ navData }}" /> <!-- 循环渲染 navData 中的数据 -->
|
wx:for="{{ navData }}" />
|
||||||
</van-grid>
|
</van-grid>
|
||||||
</view>
|
</view>
|
||||||
<goods-list goodsData="{{ goodsData }}"></goods-list> <!-- 商品列表组件，数据绑定到 goodsData 变量 -->
|
<goods-list goodsData="{{ goodsData }}"></goods-list>
|
||||||
</view> <!-- 整个页面的容器结束 -->
|
|
||||||
|
</view>
|
||||||
@ -1,13 +1,13 @@
|
|||||||
.header { /* 定义头部区域的样式 */
|
.header{
|
||||||
background-image: -webkit-gradient(linear, left bottom, left top, from(#f1503b), color-stop(50%, #c82519)); /* 使用 WebKit 渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
|
background-image: -webkit-gradient(linear, left bottom, left top, from(#f1503b), color-stop(50%, #c82519));
|
||||||
background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%); /* 使用 WebKit 线性渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
|
background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%);
|
||||||
background-image: linear-gradient(0deg, #f1503b, #c82519 50%); /* 使用标准线性渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
|
background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
|
||||||
width: 100%; /* 宽度占满父容器 */
|
width: 100%;
|
||||||
height: 190px; /* 高度为 190 像素 */
|
height: 190px;
|
||||||
border-bottom-left-radius: 100%; /* 左下角圆角半径为 100%，形成圆形效果 */
|
border-bottom-left-radius: 100%;
|
||||||
border-bottom-right-radius: 100%; /* 右下角圆角半径为 100%，形成圆形效果 */
|
border-bottom-right-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav { /* 定义导航区域的样式 */
|
.nav{
|
||||||
margin-top: 10px; /* 上外边距为 10 像素 */
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
Loading…
Reference in new issue