视图预览

代码

<template>
  <div class="container">
    <h1>最佳皮肤评选现场</h1>
    <span class="vote" v-for="(item, index) in items" :key="index">
      <img :src="item.img" alt="">
      <br>
      <span class="name">{{ item.name }}</span>
      <p >{{ item.jianjie }}</p>
      <span class="votes">{{ item.votes }}票</span>
      <br>
      <button @click="clickAddVote(index)">投票</button>

    </span>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue"
import img1 from "./assets/1.jpg"
import img2 from "./assets/2.jpg"
import img3 from "./assets/3.jpg"
import img4 from "./assets/4.jpg"
import img5 from "./assets/5.jpg"
import img6 from "./assets/6.jpg"
import img7 from "./assets/7.jpg"
import img8 from "./assets/8.jpg"

export default {
  setup() {
    const data = reactive({
      items: [
        { name: '经典款', img: img1, jianjie: "经典的皮肤", votes: 0 },
        { name: '小熊款', img: img2, jianjie: "可爱的皮肤", votes: 0 },
        { name: '皮卡丘款', img: img3, jianjie: "活力的皮肤", votes: 0 },
        { name: '甜心超人款', img: img4, jianjie: "可爱的皮肤", votes: 0 },
        { name: '猫猫款', img: img5, jianjie: "优雅的皮肤", votes: 0 },
        { name: '小黑款', img: img6, jianjie: "简洁的皮肤", votes: 0 },
        { name: '开心超人款', img: img7, jianjie: "乐趣的皮肤", votes: 0 },
        { name: '小白白', img: img8, jianjie: "纯净的皮肤", votes: 0 }
      ]
    });
    const clickAddVote = (index) => {
      data.items[index].votes++;
    }

    return {
      ...toRefs(data),
       clickAddVote
    };
  
  }
}
</script>

<style>
.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px;
  margin: 10 auto;
  
  
}



.vote {
  display: inline-block;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;

}
.vote:hover {
  box-shadow: 0 0 15px rgba(2, 61, 255, 0.8); 

}
.vote button {
  margin-top: 10px;
}

.vote img {
  width: 260px;
  height: 260px;

  border-radius: 98%;
  margin-bottom: 10px;
}

.vote span.name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.vote p {
  font-size: 14px;
  margin-bottom: 5px;
  text-align: center;
}

.vote span.votes {
  font-size: 14px;
  margin-bottom: 5px;
  font-size: large;
  font-weight: bold;
  
}



.vote button {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

</style>

图片素材