vue点击小图切换大图，且改变点击样式

 <view class="content_main">
      <view class="content_img">
        <image :src="handImg" mode=""></image>
      </view>
      <view class="content_from">
        <n-form
          :formFields="userInfo"
          :fieldClick="fieldClick"
          ref="form"
          v-model="formData"
          :formConf="{ labelWidth: 100 }"
        ></n-form>
        <view class="content_from_bgc">
          <text> 背景宣传图 </text>
          <view class="content_from_bgc_bgc" v-for="(userImg,index) in userImgList" :key="index">
            <image @click="changeImg(userImg.url,index)" :src="userImg.url" mode="" :class="{checked:index==nowIndex}"></image>

          </view>
        </view>
      </view>
    </view>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue';
const userImgList = computed(() => {
  return[
    {
      url:"../../../../static/images/account/haibao.jpg"
    },
    {
      url:"../../../../static/images/account/haibao.jpg"
    },
    {
      url:"../../../../static/images/account/haibao.jpg"
    },
  ];
});
const handImg = ref('../../../../static/images/account/haibao.jpg');
const nowIndex = ref(0)
const changeImg = (url,index)=>{
  handImg.value = url
  nowIndex.value = index
};
</script>

<style lang="scss"  scoped>
.content_main {
    margin-top: 24rpx;
    padding: 0 192rpx;
    display: flex;
    justify-content: space-around;

    .content_img {
      image {
        width: 488rpx;
        height: 872rpx;
      }
    }

    .content_from {
      margin-left: 200rpx;
      .content_from_bgc {
        display: flex;

        .content_from_bgc_bgc {
          image {
            margin-left: 50rpx;
            width: 193rpx;
            height: 300rpx;
            border-radius: 8rpx;
          }
          .checked{
            top: -8rpx;
            border-style: solid;
            border-color: rgba(25, 179, 102, 0.5);
            padding: 8rpx 20rpx;
          }
        }
      }
    }