feat

src/views/entities/components/benefitCharts.vue

@@ -3,15 +3,20 @@
     <section class="_content">
       <section class="left_btn"></section>
       <section class="_center">
-        <img :src="tomatoImg" alt="" />
+        <img :src="current.info.img" alt="" />
       </section>
       <section class="right_btn"></section>
     </section>
-    <section class="_footer">0000</section>
+    <section class="_footer">
+      <span class="left_btn" @click="handleChange(-1)"></span>
+      <span class="right_btn" @click="handleChange(1)"></span>
+      {{ current.info.name }}{{ current.info.price }}
+    </section>
   </section>
 </template>
 
 <script setup>
+import { reactive, ref } from 'vue';
 import tomatoImg from '@/assets/images/entities/tomatoImg.png';
 import a from '@/assets/images/entities/1.jpg';
 import b from '@/assets/images/entities/2.jpg';
@@ -21,6 +26,73 @@ import e from '@/assets/images/entities/5.jpg';
 import f from '@/assets/images/entities/6.jpg';
 import g from '@/assets/images/entities/7.jpg';
 import h from '@/assets/images/entities/8.png';
+const list = ref([
+  {
+    name: '西红柿',
+    price: '2.5元/公斤',
+    img: tomatoImg,
+  },
+  {
+    name: '产品aa',
+    price: '3.5元/公斤',
+    img: a,
+  },
+  {
+    name: '产品bb',
+    price: '4.5元/公斤',
+    img: b,
+  },
+  {
+    name: '产品cc',
+    price: '5.5元/公斤',
+    img: c,
+  },
+  {
+    name: '产品dd',
+    price: '34.5元/公斤',
+    img: d,
+  },
+  {
+    name: '产品ee',
+    price: '55.5元/公斤',
+    img: e,
+  },
+  {
+    name: '产品ff',
+    price: '222.5元/公斤',
+    img: f,
+  },
+  {
+    name: '产品gg',
+    price: '32.5元/公斤',
+    img: g,
+  },
+  {
+    name: '产品hh',
+    price: '2.7元/公斤',
+    img: h,
+  },
+]);
+const current = reactive({
+  index: 0,
+  length: list.value.length - 1,
+  info: {
+    name: '西红柿',
+    price: '2.5元/公斤',
+    img: tomatoImg,
+  },
+});
+function handleChange(n) {
+  if (current.index == 0 && n == -1) {
+    current.index = current.length;
+  } else if (current.index == current.length && n == 1) {
+    current.index = 0;
+  } else {
+    current.index += n;
+  }
+  console.log('current', current);
+  current.info = list.value[current.index];
+}
 </script>
 
 <style lang="scss" scoped>
@@ -59,9 +131,29 @@ import h from '@/assets/images/entities/8.png';
     }
   }
   ._footer {
+    position: relative;
     height: 40px;
     width: 60%;
-    background: url('../../../assets/images/basic/footerBtnTextBG.png') no-repeat center center / cover;
+    font-size: 20px;
+    text-align: center;
+    color: #fff;
+    line-height: 40px;
+    background: url('../../../assets/images/basic/tagBG.png') no-repeat center center / cover;
+    span {
+      display: block;
+      position: absolute;
+      top: 8px;
+      width: 24px;
+      height: 24px;
+    }
+    .left_btn {
+      left: 6px;
+      background: url('../../../assets/images/basic/leftArrowIcon.png') no-repeat center center / cover;
+    }
+    .right_btn {
+      right: 6px;
+      background: url('../../../assets/images/basic/rightArrowIcon.png') no-repeat center center / cover;
+    }
   }
 }
 </style>

src/views/entities/components/categoryCharts.vue

@@ -44,7 +44,7 @@ const option = reactive({
     },
     subtext: '22.2%',
     subtextStyle: {
-      color: '#07f7c4',
+      color: '#02FD94',
       fontSize: '18px',
     },
     top: 'center',