145 lines
3.5 KiB
Vue
145 lines
3.5 KiB
Vue
<template>
|
|
<view class="app">
|
|
<nut-searchbar v-model="searchValue" placeholder="要搜索点什么？"></nut-searchbar>
|
|
<nut-swiper :init-page="0" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
|
|
<nut-swiper-item v-for="(itm,idx) in swiperList" :key="idx">
|
|
<img :src="itm.url" :alt="itm.id"/>
|
|
</nut-swiper-item>
|
|
</nut-swiper>
|
|
<!-- <nut-tabs v-model="tabvalue" background="#fff" title-scroll title-gutter="10" name="0" :auto-height="true">-->
|
|
<!-- <nut-tab-pane title="精选推荐">-->
|
|
|
|
<!-- </nut-tab-pane>-->
|
|
<!-- <nut-tab-pane title="夏日防嗮"></nut-tab-pane>-->
|
|
<!-- <nut-tab-pane title="人气热榜"></nut-tab-pane>-->
|
|
<!-- </nut-tabs>-->
|
|
<view class="goodBox">
|
|
<view class="good" v-for="item in 5">
|
|
<image
|
|
src="https://cdn-we-retail.ym.tencent.com/tsr/goods/nz-09a.png?imageMogr2/thumbnail/564x564/quality/70/strip/format/webp"
|
|
/>
|
|
<view class="good-text-box">
|
|
<text class="good-text">白色短袖连衣裙荷叶边裙摆宽松韩版休闲纯白清爽优雅连衣裙</text>
|
|
<view class="good-price-box">
|
|
<text class="good-text-price"><text style="font-size: 20px">188</text>积分</text>
|
|
<Cart size="20" color="#ff0000" @click="addCart()"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {ref} from 'vue';
|
|
import {Cart} from '@nutui/icons-vue-taro';
|
|
import Taro from '@tarojs/taro';
|
|
|
|
const searchValue = ref("")
|
|
const tabvalue = ref("0")
|
|
|
|
const swiperList = ref([
|
|
{
|
|
id: 1,
|
|
url: "https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
|
|
},
|
|
{
|
|
id: 2,
|
|
url: "https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg"
|
|
},
|
|
{
|
|
id: 3,
|
|
url: "https://storage.360buyimg.com/jdc-article/welcomenutui.jpg"
|
|
},
|
|
{
|
|
id: 4,
|
|
url: "https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
|
|
}])
|
|
|
|
const addCart = () => {
|
|
Taro.showToast({
|
|
title: '加入购物车成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.app {
|
|
box-sizing: border-box;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.nut-swiper-item {
|
|
//line-height: 150px;
|
|
//padding: 20px;
|
|
}
|
|
|
|
.nut-swiper-item img {
|
|
width: 100%;
|
|
height: 350px;
|
|
//border-radius: 10px;
|
|
}
|
|
|
|
.goodBox {
|
|
//width: 100%;
|
|
//height: 100%;
|
|
margin-top: 5px;
|
|
display: flex;
|
|
padding: 20px;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.good {
|
|
width: 340px;
|
|
//height: 540px;
|
|
background-color: #fff;
|
|
margin-bottom: 10px;
|
|
border-bottom-left-radius: 15px;
|
|
border-bottom-right-radius: 15px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 350px;
|
|
}
|
|
|
|
.good-text-box {
|
|
padding: 10px;
|
|
|
|
.good-text {
|
|
flex-shrink: 0;
|
|
font-size: 28px;
|
|
color: #333;
|
|
font-weight: 400;
|
|
display: -webkit-box;
|
|
height: 72px;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
word-break: break-word;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.good-price-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
|
|
.good-text-price {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #ff0000;
|
|
//font-weight: 400;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|