<template>
  <div id="top">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="2" class="one_1">
            <el-image :src="imgUrl"></el-image>
          </el-col>
          <el-col :span="22" class="one_2">
            <span class="zTxt">{{ zTxt }}</span>
            <span class="eTxt">{{ eTxt }}</span>
            <el-link @click="toMore()">更多</el-link>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import type { Ref } from 'vue';
import { toRefs, ref } from 'vue';
const props = defineProps({
  zTxt: { type: String, default: () => '' },
  eTxt: { type: String, default: () => '' }
});
const { zTxt } = toRefs(props);
const { eTxt } = toRefs(props);
const imgUrl: Ref<any> = ref('/src/assets/market-1.png');
const emit = defineEmits(['toMore']);
const toMore = () => {
  emit('toMore');
};
</script>

<style lang="scss" scoped>
.main {
  .one {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .one_1 {
      .el-image {
        width: 45px;
        height: 45px;
        overflow: hidden;
      }
    }
    .one_2 {
      height: 45px;
      border-bottom: 3px solid #044b79;
      line-height: 45px;
      padding: 0 5px;
      .zTxt {
        font-size: 24px;
        font-weight: 700;
      }
      .eTxt {
        padding: 0 10px;
        text-transform: Capitalize;
        font-size: 18px;
        color: #92959a;
        font-weight: 700;
      }
      .el-link {
        float: right;
        font-weight: bold;
      }
    }
  }
}
</style>
