i

src/pages/index/index.vue

@@ -0,0 +1,144 @@
+<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>