foster-pc-vue/src/views/znxy/com/Tsyg.vue

<template>
  <div class="tsyg-page">
    <div class="yg-bg">
      <div class="name">态势预估</div>
      <div class="progress">
        <img class="arrow" src="@/assets/img/znxy/tsyg_arrow.png" />
        <div class="line">
          <div :class="['yse-events',{'active':active===0}]" @click="handleActive(0)"> &nbsp;&nbsp;&nbsp;当前&nbsp;&nbsp;&nbsp;</div>
          <div :class="['blue','yse-events',{'active':active===5}]" @click="handleActive(5)">未来5天</div>
          <div :class="['red','yse-events',{'active':active===7}]" @click="handleActive(7)">未来7天</div>
          <!-- <div :class="['red','yse-events',{'active':active===15}]" @click="handleActive(15)">未来15天</div> -->
          <!-- <div :class="['red','yse-events',{'active':active===30}]" @click="handleActive(30)">未来30天</div> -->
          <img :style="{left:iconLeft(active)}" class="orientation" src="@/assets/img/znxy/orientation.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
let emits = defineEmits(["selectDay"])

const active = ref(0)


const handleActive = (e) =>{
    active.value = e
  emits("selectDay",e)
}

const iconLeft = (e) =>{
    let left = '40'
    if(e===5){
        left = '62.4'
    }
    if(e===7){
        left = '84.6'
    }
    if(e===15){
        left = '74.3'
    }
    if(e===30){
        left = '89.3'
    }
    return left + '%'
}
</script>

<style lang="scss" scoped>
.tsyg-page {
  .yg-bg {
    background-image: url("@/assets/img/znxy/tsyg_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 480px;
    height: 60px;
    position: absolute;
    bottom: 19px;
    display: flex;
    align-items: center;
    .name {
      font-size: 15px;
      color: #ffffff;
      margin-left: 17px;
    }
    .progress {
      display: flex;
      align-items: center;

      .line {
        width: 320px;
        height: 1px;
        margin-left: -2px;
        background: linear-gradient(90deg, #29f19c 0%, #02a1f9 100%);
        display: flex;
        // color: #fde16f;
        color: #44d6e9;
        div {
          padding-top: 7px;
          position: relative;
          width: 30%;
          display: flex;
          justify-content: flex-end;
          margin-right: -20px;
          cursor: pointer;
          margin-left: 10%;
          &::before {
            content: "";
            position: absolute;
            top: -6px;
            right: 20px;
            width: 8px;
            height: 8px;
            background: #112325;
            border-radius: 50%;
            border: 2px solid #51e9f0;
          }
        }
        .active {
          color: #fde16f;
          &::before {
            background: #027278;
          }
        }
        // .blue {
        //   color: #44d6e9;
        // }
        // .red {
        //   color: #fd696a;
        // }
        .orientation {
          width: 26px;
          height: 32px;
          position: absolute;
          top: -8px;
          left: 29.4%;
        }
      }
    }
  }
}
</style>