HTML、CSS、VUE 练习项目一：Expanding-cards （动态类、动态样式）

效果预览

代码 style.css

* {
    box-sizing: border-box;
}

body {
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

app.vue

<template>
  <div class="container">
    <!--active 标识被点击的图片 -->
    <template v-for="(item, index) in datas" :key="index">
      <div :class="'panel'+(item.isActive==true?' active':'')" @click="toggleActive(index)"
           :style="{backgroundImage: 'url('+ item.url +')'}">
        <h3>{{item.name}}</h3>
      </div>
    </template>

  </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue"
const currentIndex=ref<number>(0)
const datas=ref([
  {
    id:"1",
    name:"Explore The World",
    url:"http://192.168.111.97/images/1.avif",
    isActive:true
  },
  {
    id:"2",
    name:"Wild Forest",
    url:"http://192.168.111.97/images/2.avif",
    isActive:false
  },
  {
    id:"3",
    name:"Sunny Beach",
    url:"http://192.168.111.97/images/3.avif",
    isActive:false
  },
  {
    id:"4",
    name:"City on Winter",
    url:"http://192.168.111.97/images/4.avif",
    isActive:false
  },
  {
    id:"4",
    name:"Mountains - Clouds",
    url:"http://192.168.111.97/images/5.avif",
    isActive:false
  },
])
function toggleActive(index:number){
  datas.value[currentIndex.value].isActive=false
  datas.value[index].isActive=true
  currentIndex.value=index
}

</script>

<style scoped>

.container {
  display: flex;
  width: 90vw;
}
.container {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  -webkit-transition: all 800ms ease-in;
}

.panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 10;
}

.panel.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}


</style>

知识点总结:

• 响应式不聚flex
• 动态class类
• 动态样式

背景图片