Skip to content

G
groupPurchase-miniapp
Commit c78320a8 authored by 石建新（贵阳日报）'s avatar 石建新（贵阳日报）
Browse files
Options

套餐详情

parent 5cdeb3b5
Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 31 deletions
src/assets/iconfont/iconfont.css
View file @ c78320a8
@font-face {
font-family: "iconfont"; /* Project id 4633414 */
src: url('//at.alicdn.com/t/c/font_4633414_aiuhmuh8flr.woff2?t=1721909840284') format('woff2'),
url('//at.alicdn.com/t/c/font_4633414_aiuhmuh8flr.woff?t=1721909840284') format('woff'),
url('//at.alicdn.com/t/c/font_4633414_aiuhmuh8flr.ttf?t=1721909840284') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shoucang:before {
content: "\e606";
}
.icon-pinglun:before {
content: "\e618";
}
.icon-aixin:before {
content: "\e622";
}
\ No newline at end of file
font-family: "iconfont"; /* Project id 4633414 */
src: url('//at.alicdn.com/t/c/font_4633414_03ddalpufkiu.woff2?t=1721970729959') format('woff2'),
url('//at.alicdn.com/t/c/font_4633414_03ddalpufkiu.woff?t=1721970729959') format('woff'),
url('//at.alicdn.com/t/c/font_4633414_03ddalpufkiu.ttf?t=1721970729959') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-jinggao:before {
content: "\e716";
}
.icon-rs-countdown:before {
content: "\e614";
}
.icon-naozhong:before {
content: "\e666";
}
.icon-ic_business_refund24px:before {
content: "\e619";
}
.icon-shoucang:before {
content: "\e606";
}
.icon-pinglun:before {
content: "\e618";
}
.icon-aixin:before {
content: "\e622";
}
src/pages.json
View file @ c78320a8
......@@ -11,24 +11,33 @@
"style": {
"navigationBarTitleText": "小程序平台"
}
}, {
},
{
"path": "pages/shop/shop",
"style": {
"navigationBarTitleText": "店铺首页"
}
}, {
},
{
"path": "pages/order/order",
"style": {
"navigationBarTitleText": "订单列表"
}
}, {
},
{
"path": "pages/order/detail",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/packageDetails/packageDetails",
"style": {
"navigationBarTitleText": "套餐详情"
}
}
],
"globalStyle": {
"navigationStyle": "custom"
}
}
}
\ No newline at end of file
src/pages/packageDetails/packageDetails.vue 0 → 100644
View file @ c78320a8
<template>
<view class="package-details">
<!-- 轮播 -->
<view class="swiper">
<wd-swiper
customClass="swiper-custom"
:list="swiperList"
autoplay
height="512rpx"
customStyle="border-radius: 0rpx;"
:current="current"
@click="handleClick"
@change="onChange"
></wd-swiper>
</view>
<!-- 轮播-end -->
<view class="package-details-card">
<view class="package-details-num">
<view class="num">
<text class="icon">￥</text>
<text class="amount-of-money">88</text>
</view>
<view class="num2">￥128</view>
<view class="num3">共省￥30</view>
</view>
<view class="title">双人田蛙尝鲜餐(30元代金券一张，除酒水 饮料外全场通用，仅能使用一张)</view>
<view class="info-card">
<view class="yh">
<text class="yh-name">优惠：</text>
<view class="bt-icon">
<image src="@/static/shop/bt-icon.png"></image>
<text class="yh-name lj">立减10元</text>
</view>
<view class="ylq-icon">
已领取
<wd-icon name="arrow-right" size="16px"></wd-icon>
</view>
</view>
<view class="bz">
<text class="yh-name">保障：</text>
<view class="icon-box">
<i classs="iconfont icon-jinggao" />
过期退
</view>
<view class="icon-box">
<i classs="iconfont icon-jinggao"></i>
随时退
</view>
<view class="icon-box">
<i classs="iconfont icon-jinggao"></i>
随时用
</view>
<i classs="iconfont icon-jinggao"></i>
</view>
<view class="xz">
<text class="yh-name">限制：</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
const swiperList = ref([
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
]);
</script>
<style lang="scss" scoped>
page {
background-color: #f9f9f9;
}
.package-details {
width: 750rpx;
position: relative;
.swiper {
width: 750rpx;
margin: 0 auto;
height: 512rpx;
:deep(.wd-swiper__track) {
border-radius: 0;
}
}
.package-details-card {
width: 710rpx;
background: #ffffff;
box-shadow: 0rpx -8rpx 44rpx 0rpx rgba(255, 255, 255, 0.6);
border-radius: 16rpx 16rpx 16rpx 16rpx;
box-sizing: border-box;
padding: 20rpx;
margin: 0 auto;
display: flex;
flex-direction: column;
.package-details-num {
display: flex;
align-items: flex-end;
.num {
color: #ff494e;
display: inline-block;
vertical-align: bottom; /* 使元素底部对齐 */
.icon {
font-size: 20rpx;
}
.amount-of-money {
font-weight: 700;
font-size: 48rpx;
}
}
.num2 {
font-size: 10 * 2rpx;
color: #908f8f;
text-decoration: line-through;
margin-left: 8rpx;
}
.num3 {
background: #fcdbdb;
border-radius: 14rpx 14rpx 14rpx 0rpx;
font-size: 10 * 2rpx;
margin-left: 10rpx;
padding: 2rpx;
color: #ff494e;
}
}
.title {
font-size: 18 * 2rpx;
font-weight: bold;
margin-top: 22rpx;
color: #3d3d3d;
}
.info-card {
width: 335 * 2rpx;
box-sizing: border-box;
padding: 20rpx;
margin-top: 20rpx;
background: linear-gradient(180deg, rgba(252, 219, 219, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
.yh-name {
font-size: 10 * 2rpx;
color: #ff494e;
}
.yh {
display: flex;
align-items: center;
.bt-icon {
display: flex;
position: relative;
margin-left: 26rpx;
image {
width: 125 * 2rpx;
height: 22 * 2rpx;
box-sizing: border-box;
}
.lj {
position: absolute;
right: 14rpx;
height: 11 * 2rpx;
line-height: 22rpx;
top: calc(50% - 11rpx);
}
}
}
.ylq-icon {
margin-left: auto;
display: flex;
align-items: center;
font-size: 8 * 2rpx;
color: #abaaaa;
}
.bz {
display: flex;
align-items: center;
.icon-box {
display: flex;
align-items: center;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment