micro_vue/src/scrm_pages/site/index.vue

<template>
   <div class="main-contain">
      <div class="position">
        <bread-crumb :crumbs='crumbs'></bread-crumb>
      </div>
      <div class="app-container">
         <el-row :gutter="20">
            <el-col :span="12">
              <div class="success">
                <h1 class="name">欢迎来到微官网主页</h1>
                <div class="tips">您可以手机扫码访问或在右侧预览</div>
                <div class="site-code"><img :src="codeImg" alt=""></div>
                <router-link to="/site/preview">
                  <el-button type="primary">进入微官网后台</el-button>
                </router-link>
              </div>
            </el-col>
            <el-col :span="12">

            </el-col>
          </el-row>
      </div>
   </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";
export default {
  name: "site",
  components: {
    BreadCrumb
  },
  data() {
    return {
      crumbs: [{ path: false, name: "微网站" }],
      codeImg: require("../../assets/home/wei.jpg")
    };
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.success {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  .name {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding-bottom: 10px;
  }
  .tips{
    line-height: 30px;
    padding-bottom: 10px;
  }
  .site-code {
    width: 200px;
    padding-bottom: 10px;
    img{
      width: 100%;
    }
  }
}
</style>