dongxin/src/components3/SpringFrame/canyin.vue

<template>
  <el-row class="video commonWidth" v-if="state">
    <el-col class="top">
      <el-col class="title">
        <span>菜品名称</span>
      </el-col>
      <el-image
        @click="close2"
        class="close"
        :src="close"
      ></el-image>
    </el-col>
    <el-col class="contain">
       <el-col class="title">{{data2.name}}</el-col>
       <el-col :span="12" class="nh">
            <el-image :src="cy"  />
            <el-col class="name"
            >供应数量<el-col class="num"
                >{{data2.num[0]}}<span class="unit">份</span></el-col
            ></el-col
            >
      </el-col>
      <el-col :span="12" class="nh">
            <el-image :src="cy" />
            <el-col class="name"
            >剩余数量<el-col class="num"
                >{{data2.num[1]}}<span class="unit">份</span></el-col
            ></el-col
            >
      </el-col>
      <el-col :span="12" class="nh">
            <el-image :src="cy"  />
            <el-col class="name"
            >单价<el-col class="num"
                >{{data2.num[2]}}<span class="unit">元</span></el-col
            ></el-col
            >
      </el-col>
      <el-col :span="12" class="nh">
            <el-image :src="cy"  />
            <el-col class="name"
            >评价统计<el-col class="num"
                >{{data2.num[3]}}<span class="unit">分</span></el-col
            ></el-col
            >
      </el-col>
    </el-col>
  </el-row>
</template>
<script>
import close from "@/assets/images2/close.png";
import cy from "@/assets/images2/能耗统计icon.png";
export default {
  name: "canyin",
  props: ["resInfo"],
  data() {
    return {
      state: true,
      close: close,
      cy: cy,
      data:[
          {name:"清炒时蔬",num:[412,5,10,9]},
          {name:"柠檬鸭",num:[315,0,15,8.5]},
          {name:"番茄炒蛋",num:[267,3,10,8.1]},
      ],
      data2:{}
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.data2 = this.data[this.resInfo.canyin - 1]
    },

    close2() {
      //关闭
      this.state = false;
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/common.scss";
.commonWidth {
  width: 950px;
  height: 500px;
  background-color: rgba(40,40,40,0.5);
  margin: 0 auto;
  border-radius: 20px;
  padding: 20px;
  color: $white;
  .top {
    .title {
      width: 100%;
      margin-top: -2px;
      margin-left: 16px;
      display: inline-block;
      font-size: 30px;
    }
    .close {
      width: 40px;
      height: 40px;
      float: right;
      margin-top: -40px;
      image {
        width: 100%;
      }
    }
  }
  .contain {
      .title{
          font-size: 30px;
          text-align: center;
          margin:40px auto -30px;
      }
    .nh {
        margin-top: 100px;
            .el-image {
            width: 40px;
            margin-top: -25px;
            margin-left:120px;
            float: left;
        }
        .name {
            font-size: 26px;
            margin: -25px 15px 0 !important;
            width: 150px;
            display: block;
        .num {
            font-size: 30px;
            font-family: 'DINAlternate-Bold';
            font-weight: 700;
            margin-top: 15px;
            display: inline-block;
            .unit {
            font-size: 20px;
            margin-left:10px;
            }
        }
        }
    }
  }
}
</style>