six_uniapp_0005
This commit is contained in:
doudou201703
@@ -0,0 +1,270 @@
|
||||
<style scoped lang="scss">
|
||||
.home-com-chao-hua-shuai {
|
||||
width: 690rpx;
|
||||
height: 400rpx;
|
||||
//background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12rpx;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
.hua-shuai-title {
|
||||
height: 15%;
|
||||
//padding-top: 30rpx;
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.flex-container-item {
|
||||
display: flex;
|
||||
height: 44rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.text-item-1 {
|
||||
//width: 96rpx;
|
||||
height: 44rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.text-item-2 {
|
||||
width: 120rpx;
|
||||
height: 34rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
line-height: 34rpx;
|
||||
color: #efab6c;
|
||||
}
|
||||
|
||||
.text-item-3 {
|
||||
width: 112rpx;
|
||||
height: 34rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #40AE36;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.hua-shuai-goods {
|
||||
display: grid;
|
||||
height: 85%;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 100%;
|
||||
|
||||
.hua-shuai-goods-items {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 70% 13% 17%;
|
||||
align-content: space-between;
|
||||
|
||||
.goods-items-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
//&.theme-white {
|
||||
// border: #b9b9b9 dashed 1px; // 主题是亮色的时候
|
||||
//}
|
||||
//
|
||||
//&.theme-dark {
|
||||
// border: #6e6d6d dashed 1px; // 主题是亮色的时候
|
||||
//}
|
||||
|
||||
:deep(.custom-class-img-title) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.custom-image-title {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.goods-items-name {
|
||||
//width: 184rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 5%;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.goods-items-price {
|
||||
padding-left: 5%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-right: 26rpx;
|
||||
|
||||
.name-text-1 {
|
||||
.text-1 {
|
||||
width: 90rpx;
|
||||
height: 44rpx;
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
color: #F55726;
|
||||
line-height: 32rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.text-2 {
|
||||
width: 90rpx;
|
||||
height: 44rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #F55726;
|
||||
line-height: 32rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.name-text-card {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
|
||||
|
||||
&.theme-white {
|
||||
border: #b9b9b9 dashed 1px; // 主题是亮色的时候
|
||||
}
|
||||
|
||||
&.theme-dark {
|
||||
border: #6e6d6d dashed 1px; // 主题是亮色的时候
|
||||
}
|
||||
|
||||
:deep(.custom-class-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.custom-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view class=home-com-chao-hua-shuai @click="进入商城页面">
|
||||
<view class="hua-shuai-title">
|
||||
<view class="flex-container">
|
||||
<view class="flex-container-item">
|
||||
<text class="text-item-1" style="color: #46a44a">超划算</text>
|
||||
</view>
|
||||
<view class="line-widht-number" style="width: 8rpx"></view>
|
||||
<view class="flex-container-item">
|
||||
<text class="text-item-2">最新优惠</text>
|
||||
</view>
|
||||
<view class="line-widht-number" style="flex: 1"></view>
|
||||
<view class="flex-container-item">
|
||||
<text class="text-item-3">查看全部</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 超划算图片区域-->
|
||||
<view class="hua-shuai-goods">
|
||||
<view class="hua-shuai-goods-items" v-for="(value,index) in goods_list" v-bind:key="index">
|
||||
<view class="goods-items-img" :class="{'theme-white':theme==='light','theme-dark':theme==='dark'}">
|
||||
<wd-img custom-class="custom-class-img-title" custom-image="custom-image-title"
|
||||
:src="value.img_url">
|
||||
<template #error>
|
||||
<view class="error-wrap">加载失败</view>
|
||||
</template>
|
||||
<template #loading>
|
||||
<view class="loading-wrap">
|
||||
<wd-loading/>
|
||||
</view>
|
||||
</template>
|
||||
</wd-img>
|
||||
</view>
|
||||
<view class="goods-items-name">六果泡泡</view>
|
||||
<view class="goods-items-price">
|
||||
<view class="name-text-1">
|
||||
<text class="text-1">￥</text>
|
||||
<text class="text-2">39.9</text>
|
||||
</view>
|
||||
<view class="name-text-card" :class="{'theme-white':theme==='light','theme-dark':theme==='dark'}">
|
||||
<wd-img custom-class="custom-class-img" custom-image="custom-image"
|
||||
src="/static/购物车.svg">
|
||||
<template #error>
|
||||
<view class="error-wrap">加载失败</view>
|
||||
</template>
|
||||
<template #loading>
|
||||
<view class="loading-wrap">
|
||||
<wd-loading/>
|
||||
</view>
|
||||
</template>
|
||||
</wd-img>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// 页面功能注释区域
|
||||
import {ref} from "vue";
|
||||
|
||||
const goods_list = ref([
|
||||
{img_url: "https://hudie.sixgou.com/%E5%85%AD%E6%9E%9C%E4%BA%A7%E5%93%81%E5%9B%BE/sixcp.png"},
|
||||
{img_url: "https://hudie.sixgou.com/%E5%85%AD%E6%9E%9C%E4%BA%A7%E5%93%81%E5%9B%BE/sixcp2.png"},
|
||||
{img_url: "https://hudie.sixgou.com/%E5%85%AD%E6%9E%9C%E4%BA%A7%E5%93%81%E5%9B%BE/139bd00dec9c4e39d6c3cb17fc9a098a.jpg"},
|
||||
]);
|
||||
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||
defineOptions({options: {styleIsolation: "shared"}, name: "home-com-chao-hua-shuai"}); // 组件使用
|
||||
const 进入商城页面 = async (): Promise<void> => {
|
||||
await wx.vibrateShort({type: "heavy"});
|
||||
uni.navigateTo({url: "/subPackages/homeSubPages/商城页面目录/PageShangCheng"}).then().catch(() => {
|
||||
wx.reLaunch({url: "/pageTabBar/Home/Home"});
|
||||
});
|
||||
};
|
||||
//在这个组件, 可以获取当前用户的配送地址,
|
||||
</script>
|
||||
Reference in New Issue
Block a user