common/src/components/web-frame/top.vue

<template>
  <div id="top">
    <el-row v-show="siteInfo.display">
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="20" class="left" @click.native="$router.push('/')">
              <el-col :span="3" class="image">
                <el-image :src="siteInfo.logo_url"></el-image>
              </el-col>
              <el-col :span="21" class="other">
                <el-col :span="24" class="zhTitle textOver">
                  {{ siteInfo.zhTitle }}
                </el-col>
                <el-col :span="24" class="enTitle textOver">
                  {{ siteInfo.enTitle }}
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="4" class="right">
              <slot name="deRight"></slot>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'top',
  props: {
    siteInfo: { type: Object, default: () => {} },
  },
  components: {},
  data: function() {
    return {};
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    min-height: 130px;
    .left {
      .image {
        padding: 16px 0;
        text-align: center;
        .el-image {
          width: 90px;
          height: 90px;
        }
      }
      .other {
        padding: 30px 0;
        .zhTitle {
          font-size: 35px;
          font-family: cursive;
          font-weight: 700;
        }
        .enTitle {
          font-size: 15px;
          text-transform: capitalize;
        }
      }
    }
  }
}
</style>