scrm-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 id="qrcode" class="qrcode"></div>
            <router-link to="/site/preview">
              <el-button type="primary">进入微官网后台</el-button>
            </router-link>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="phone">
            <div class="phonetwo">9:42</div>
            <div class="phonethree">
              <img src="static/images/u189.png" style="width:100%;height:100%" />
            </div>
            <div class="phonefour">
              <img src="static/images/u187.png" style="width:100%;height:100%" />
            </div>
            <div class="phonefive">
              <img src="static/images/u188.png" style="width:100%;height:100%" />
            </div>
            <div class="phoneone">
              <iframe
                id="myIframe"
                :src="this.url"
                width="100%"
                height="100%"
                marginwidth="0"
                frameborder="no"
                scrolling="no"
              ></iframe>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";
import QRCode from 'qrcodejs2';
// import {GetDefaultData,GetUserOrgid} from '@/api/site/site';
import Vue from 'vue';
export default {
  name: "site",
  components: {
    BreadCrumb
  },
  data() {
    return {
      crumbs: [{ path: false, name: "微网站" }],
      codeImg: require("../../assets/home/wei.jpg"),
      usreOrgID: "",
      // url:"http://microweb.kuyicloud.com/#/microHome?orgid="+this.$store.getters.xt_user.org_id,
       url:"http://jk.test.sgjyun.com/#/microHome?orgid="+this.$store.getters.xt_user.org_id,
      // url:"http://microweb.kuyicloud.com/#/microHome?orgid=3877",

    };
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        width: 100,
        height: 100, // 高度
        // text: 'http://microweb.kuyicloud.com/#/microHome?orgid='+this.$store.getters.xt_user.org_id // 二维码内容
        text:'http://jk.test.sgjyun.com/#/microHome?orgid='+this.$store.getters.xt_user.org_id,// 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
      console.log(qrcode);
    },
    GetDefaultData() {
      GetDefaultData().then(response => {
        if (response.data.state == 1) {
          var model = response.data.data.model;
        }
      });
    },
    GetUserOrgid() {
      GetUserOrgid().then(response => {
        if (response.data.state == 1) {
          var usreOrgID = response.data.data.usreOrgID;
          this.usreOrgID = response.data.data.usreOrgID;
          console.log("我的世界我做主", usreOrgID);
        }
      });
    },
    OK() {
      // 操作iframe中内容的CSS
      var iframe = document.getElementById("myIframe");
      var body = iframe.contentWindow.document.body;
      console.log(
        "结案设计师的拉升恐龙当家哈萨克刘德华拉科技好看多了经安徽省科技的哈里数据库蝴蝶结卡时间段哈萨克京东卡SDK"
      );
      console.log(body);

      body.style.borderRadius = 50;
      // a.style.margin = 50;
    }
  },
  mounted() {
    this.qrcode();
    this.OK();
  },
  created() {
    // this.GetUserOrgid();
   }
};
</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%;
    }
  }
  .qrcode {
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
  }
}

.phone {
  width: 380px;
  height: 750px;
  background: url(../../assets/img/phone.png) 50% no-repeat;
}

.phoneone {
  position: absolute;
  width: 320px;
  height: 660px;
  // border: solid 1px red;
  margin-top: 60px;
  margin-left: 30px;
  text-align: center;
}

.phonetwo {
  position: absolute;
  width: 50px;
  height: 20px;
  // border:solid 1px blue;
  margin-left: 55px;
  margin-top: 40px;
}

.phonethree {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: 280px;
  margin-top: 40px;
}

.phonefour {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: 300px;
  margin-top: 40px;
}
.phonefive {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: 325px;
  margin-top: 40px;
}
</style>