gdy_qywx_pc/src/views/workbench/workbench_blank.vue

<template>
  <div class="workbenchblank_box">
    <!-- <router-view /> -->
    <el-row>
      <el-col :span="12" class="workbench_mobile" style="padding:30px 0 66px 170px"><img src="static/images/workbench_mobile.png" /></el-col>
      <el-col :span="12" style="padding:74px 0 152px;">
        <el-row>
          <el-col :span="24" class="worktitle">为了更好的体验</el-col>
          <el-col
            :span="24"
            class="downfont"
            style="position:relative;font-size:18px;font-weight:normal;color:#0d0c0c;font-family: Microsoft Yahei;padding-left: 60px;margin-bottom:42px;"
          >
            我们建议您下载APP，在手机端操作更方便，扫码下载。
          </el-col>
          <!-- <el-col :span="24" style="font-size:16px;color:#666;margin:12px 0 42px;font-family: Microsoft Yahei;">下载功道云APP，解决<span style="color:#fc7676;margin:0 6px;font-weight:600;">企业管理执行难</span>的问题。</el-col> -->
          <el-col :span="5" class="secan_type android">
            <div class="wechat_code"><img src="static/images/workbench_android.png" /></div>
            <div class="wechat_code"><img src="static/images/android_code.jpg" /></div>
            <span class="name">
              <img src="static/images/workbench_android.png" />
              Android
            </span>
          </el-col>
          <el-col :span="5" class="secan_type ios">
            <div class="wechat_code"></div>
            <div class="wechat_code"><img src="static/images/ios_code.jpg" /></div>
            <span class="name">
              <img src="static/images/workbench_ios.png" />
              IOS
            </span>
          </el-col>
        </el-row>
        <el-col :span="24" style="font-size:20px;font-weight:bold;line-height:32px;color:#333;margin:60px 0 8px;font-family: Microsoft Yahei;">如何解决管理执行难的问题</el-col>
        <el-col :span="24" style="font-size:16px;color:#666;line-height:24px;margin:0px 0 0;font-family: Microsoft Yahei;">打开APP的“管理中心”，</el-col>
        <el-col :span="24" style="font-size:16px;color:#666;line-height:24px;margin:0px 0 32px;font-family: Microsoft Yahei;">B分、A分、录分、任务、奖票、绩效…应有尽有</el-col>
        <el-col :span="20" class="function">
          <el-row :gutter="32">
            <div>
              <el-col :span="4">
                <img src="static/images/index_apoint.png" />
                <span class="name">奖扣A分</span>
              </el-col>
              <el-col :span="4">
                <img src="static/images/index_bpoint.png" />
                <span class="name">奖扣B分</span>
              </el-col>
              <el-col :span="4">
                <img src="static/images/indexPPTask.png" />
                <span class="name">绩效任务</span>
              </el-col>
              <el-col :span="4">
                <img src="static/images/indexPTTask.png" />
                <span class="name">临时任务</span>
              </el-col>
              <el-col :span="4">
                <img src="static/images/indexRTask.png" />
                <span class="name">悬赏任务</span>
              </el-col>
            </div>
          </el-row>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {}
};
</script>
<style scoped lang="scss">
.workbenchblank_box {
  margin-bottom: 20px;
  background: #fff;
  .secan_type {
    position: relative;
    width: 120px;
    height: 150px;
    margin-right: 120px;
  }
  .secan_type .wechat_code {
    display: block;
    position: absolute;
    width: 120px;
    height: 120px;
    background: transparent;
    border: 3px #e6e1e1 solid;
    transition: 0.35s ease-in-out;
  }
  .secan_type .wechat_code img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    transition: 0.35s ease-in-out;
  }

  .secan_type .name {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 0;
    font-size: 16px;
    color: #303133;
  }
  .secan_type .name img {
    display: none;
    position: relative;
    top: 4px;
    width: 20px;
    height: auto;
    margin-right: 6px;
  }
  // .android{
  //   margin-right:56px;
  //   background: url(static/images/android_code.jpg) no-repeat top;
  //   background-size: 99%;
  // }
  // .ios{
  //   background: url(static/images/ios_code.jpg) no-repeat top;
  //   background-size: 99%;
  // }
  .function {
    margin: 0px auto 0px;
  }
  .function img {
    width: 100%;
    height: auto;
  }
  .function .name {
    display: block;
    text-align: center;
    padding-top: 10px;
    font-size: 14px;
    color: #303133;
  }
  .worktitle {
    font-size: 38px;
    line-height: 72px;
    font-weight: bold;
    letter-spacing: 2px;
    color: rgb(48, 49, 51);
    font-family: 'Microsoft Yahei';
    background: linear-gradient(120deg, #26a2ff, #7dc5fb);
    -webkit-background-clip: text;
    color: transparent;
    // text-shadow: 1px 2px 4px rgba(125,197,251,0.14);
  }
  .downfont:before {
    position: absolute;
    left: 0;
    bottom: 10px;
    content: ' ';
    width: 50px;
    border-bottom: 1px #999 solid;
  }
  .function /deep/ .el-col-4 img {
    opacity: 0.76;
    transition: 0.35s ease-in-out;
  }
  .function /deep/ .el-col-4:hover {
    cursor: pointer;
  }
  .function /deep/ .el-col-4:hover img {
    opacity: 1;
    transform: scale(1.05);
    transition: 0.35s ease-in-out;
  }
}
</style>