<template>
  <div id="banner">
    <el-row>
      <el-col :span="24">
        <el-image :src="info.banner" style="height:300px;" fit="fit"></el-image>
        <div class="w_1270">
          <el-col :span="24" class="info">
            <el-col :span="2">
              <el-image style="width:112px;height:112px;" :src="info.logo"></el-image>
            </el-col>
            <el-col :span="22" style="padding:30px 10px;">
              <p class="title">{{ info.name }}</p>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'banner',
  props: {
    info: null,
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1270 {
  width: 1270px;
  margin: 0 auto;
}
p {
  padding: 0;
  margin: 0;
}
.info {
  position: absolute;
  top: 20%;
  left: 5%;
  width: 93%;
}
.info .title {
  font-size: 42px;
  color: #1770c4;
  font-family: cursive;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  font-weight: 600;
}
.info .english {
  font-size: 24px;
  color: #1770c4;
  font-family: cursive;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  font-weight: 600;
}
</style>
