front/src/views/index.vue

<template>
  <div class="app-container home">
    <el-row :gutter="20" style="margin-bottom:30px">
      <el-col :span="24" :xs="24">
        <!--        <img style="width: 100%;" src="@/assets/images/img_banner.png"/>-->
        <img style="width: 100%;" src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/img_banner.png" />
      </el-col>
    </el-row>
    <el-row style="margin: -10px;">
      <el-col :span="8" v-for="n in 3" :key="n" style="padding:10px">
        <el-card class="box-card xxcp_bg xxcp_bg1" style="margin-bottom:30px">
          <div class="header-h" style="position:relative;padding:15px;">
            <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:100px ;color:#fff; ">
              <!-- <span class="el-icon-s-check" style="margin-right: 10px;color:#fff"></span> -->
              学校测评
            </div>
            <div style="color:#fff;    font-size: 12px;margin-top: 5px;">1.2万人已测</div>
            <div style="color:#fff;font-size:12px;position: absolute;right:15px;top:28px;cursor:pointer">
              <span class="el-icon-circle-plus-outline" style="margin-right: 10px;;color:#fff"></span>更多
            </div>
          </div>
          <div style="border-radius:5px;overflow:hidden">
            <div
              @click="detail() "
              v-for="n in 4" :key="n"
              style=" height: 80px;padding: 15px; background: rgb(255, 255, 255); color: rgb(48, 49, 51);position:relative;cursor: pointer;"
            >
              <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:20px ">2021年八年级上学期期末测试</div>
              <span class="el-icon-right" style="position: absolute;top:15px;right:15px"></span>
              <span style="position: absolute;bottom:15px;right:15px;font-size:14px;color:#999">1234人已做</span>
              <div style="position: absolute;bottom:15px;left:15px;font-size:14px;">语文</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin:0 -10px;">
      <el-col :span="12" v-for="n in 2" :key="n" style="padding:10px">
        <el-card class="box-card xxcp_bg xxcp_bg1" style="margin-bottom:30px">
          <div class="header-h" style="position:relative;padding:15px;">
            <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:100px ;color:#fff; ">
              <!-- <span class="el-icon-s-check" style="margin-right: 10px;color:#fff"></span> -->
              学校测评
            </div>
            <div style="color:#fff;    font-size: 12px;margin-top: 5px;">1.2万人已测</div>
            <div style="color:#fff;font-size:12px;position: absolute;right:15px;top:28px;cursor:pointer">
              <span class="el-icon-circle-plus-outline" style="margin-right: 10px;;color:#fff"></span>更多
            </div>
          </div>
          <div style="border-radius:5px;overflow:hidden">
            <div
              @click="detail() "
              v-for="n in 4" :key="n"
              style=" height: 80px;padding: 15px; background: rgb(255, 255, 255); color: rgb(48, 49, 51);position:relative;cursor: pointer;"
            >
              <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:20px ">2021年八年级上学期期末测试</div>
              <span class="el-icon-right" style="position: absolute;top:15px;right:15px"></span>
              <span style="position: absolute;bottom:15px;right:15px;font-size:14px;color:#999">1234人已做</span>
              <div style="position: absolute;bottom:15px;left:15px;font-size:14px;">语文</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin:0 -10px;">
      <el-col :span="6" v-for="n in 4" :key="n" style="padding:10px">
        <el-card class="box-card" style="margin-bottom:30px">
          <div style="position:relative;padding: 10px; ">
            <img style="width: 100%;" src="@/assets/images/img_1.png" />
            <div style="position:relative ">
              <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:20px;line-height:40px ">高一语文名师讲解</div>
              <img style="color:#E6A23C;position: absolute;top:10px;right:10px" src="@/assets/images/icon_hot.png" fit="scale-down" />
              <div style="font-size:12px;color:#999;line-height:32px">人教版</div>
              <div style="font-size:12px;color:#999;line-height:32px">2300观看</div>
              <el-button type="primary" style="position: absolute;right:10px;bottom: 5px;">立即前往</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin:0 -10px;">
      <el-col :span="8" style="margin-bottom:30px">
        <div style="position:relative;padding: 10px; ">
          <img style="width: 100%;" src="@/assets/images/img_5.png" />
        </div>
      </el-col>
      <el-col :span="8" style="margin-bottom:30px">
        <div style="position:relative;padding: 10px; ">
          <img style="width: 100%;" src="@/assets/images/img_6.png" />
        </div>
      </el-col>
      <el-col :span="8" style="margin-bottom:30px">
        <div style="position:relative;padding: 10px; ">
          <img style="width: 100%;" src="@/assets/images/img_yunku.png" />
        </div>
      </el-col>
    </el-row>
    <!--    <el-dialog-->
    <!--      title=""-->
    <!--      :visible.sync="dialogVisible"-->
    <!--      width="60%">-->
    <!--      <el-row :gutter="24" class="mb8">-->
    <!--        <el-col :span="8">-->
    <!--          <div style="height:100px"></div>-->
    <!--        </el-col>-->
    <!--        <el-col :span="16">-->
    <!--          <el-form ref="form" :model="form" label-width="80px">-->
    <!--            <div style="color:#F56C6C; margin-bottom:20px">*账号信息安全与你本人息息相关，为了能获得更好的服务请如实填写</div>-->
    <!--            <el-form-item label="学生姓名" style="margin-top:30px">-->
    <!--              <el-input v-model="form.username" placeholder="请输入姓名" style="width: 40%; margin-right: 25px;" clearable></el-input>-->
    <!--              <el-radio-group v-model="form.sex">-->
    <!--                <el-radio label="1">男</el-radio>-->
    <!--                <el-radio label="2">女</el-radio>-->
    <!--              </el-radio-group>-->
    <!--            </el-form-item>-->
    <!--            <el-form-item label="所在省市">-->
    <!--              <province ref="province" :size="'medium'" :schoolShow="false" @change="provinceChange"></province>-->
    <!--            </el-form-item>-->
    <!--            <el-form-item label="就读学校">-->
    <!--              <el-select v-model="form.schoolId" @change="schoolChange" placeholder="请选学校" filterable style="margin-right:15px;width:120px">-->
    <!--                <el-option-->
    <!--                  v-for="item in schoolData"-->
    <!--                  :key="item.id"-->
    <!--                  :label="item.name"-->
    <!--                  :value="item.id">-->
    <!--                </el-option>-->
    <!--              </el-select>-->
    <!--              <el-select v-model="form.gradeId" @change="gradeChange" placeholder="请选择年级" filterable style="margin-right:15px;width:120px">-->
    <!--                <el-option-->
    <!--                  v-for="item in gradeData"-->
    <!--                  :key="item.gradeid"-->
    <!--                  :label="item.gradename"-->
    <!--                  :value="item.gradeid">-->
    <!--                </el-option>-->
    <!--              </el-select>-->
    <!--              <el-select v-model="form.clazzId" filterable placeholder="请选择班级" style="margin-right:15px;width:120px">-->
    <!--                <el-option-->
    <!--                  v-for="item in classData"-->
    <!--                  :key="item.id"-->
    <!--                  :label="item.name"-->
    <!--                  :value="item.id">-->
    <!--                </el-option>-->
    <!--              </el-select>-->
    <!--            </el-form-item>-->
    <!--            <el-form-item label="手机号码">-->
    <!--              <el-input v-model="form.phoneNumber" placeholder="请输入手机号" style="width: 30%; margin-right: 25px;" clearable></el-input>-->
    <!--              <span style="font-weight: 600;">验证码</span>-->
    <!--              <el-input v-model="form.code" placeholder="请输入验证码" style="width: 40%; margin-left: 25px;" clearable>-->
    <!--                <el-button v-if="isSecd" slot="append" type="primary">{{times}}S</el-button>-->
    <!--                <el-button v-else slot="append" type="primary" @click="secdCode">发送</el-button>-->
    <!--              </el-input>-->
    <!--            </el-form-item>-->
    <!--          </el-form>-->
    <!--        </el-col>-->
    <!--        <div class="text-center">-->

    <!--          <el-button type="primary" v-loading="submitLoading" @click="onSubmit" round style="margin-top:50px;width:150px">提交</el-button>-->
    <!--        </div>-->
    <!--      </el-row>-->
    <!--    </el-dialog>-->

    <!--  底部  -->

    <bottom-p></bottom-p>
  </div>
</template>

<script>
import store from "@/store";
import * as resources from "@/api/webApi/resources";
import { getUserProfile } from "@/api/system/user";
import * as gradeAxios from "@/api/webApi/grade";
import * as backAxios from "@/api/webApi/back";
import * as loginAxios from "@/api/login";

export default {
  data() {
    return {
      // submitLoading:false,
      // schoolData: [],
      // gradeData: [],
      // classData: [],
      // isSecd: false,
      // times: 120,
      // form: {},
      // dialogVisible: false,
      // user: {},
      // options: {
      //   img: store.getters.avatar //裁剪图片的地址
      // },
      // id: 0,
      // props: {
      //   lazy: true,
      //   lazyLoad(node, resolve) {
      //     const { level } = node
      //     setTimeout(() => {
      //       const nodes = Array.from({ length: level + 1 }).map(item => {
      //         let a = ''
      //         if (level == '0') {
      //           a = '省'
      //         } else if (level == '1') {
      //           a = '市'
      //         } else {
      //           a = '区'
      //         }
      //         return {
      //           value: 1212,
      //           label: `选项${a} `,
      //           leaf: level >= 2
      //         }
      //       })
      //       // 通过调用resolve将子节点数据返回，通知组件数据加载完成
      //       resolve(nodes)
      //     }, 1000)
      //   }
      // }
    };
  },
  created() {
    // this.getUser()
  },
  methods: {
    // provinceChange(data) {
    //   this.chooseArea(data)
    // },
    // chooseArea(data) {
    //   if (!data.areaValue) {
    //     return
    //   }
    //   let _this = this
    //   let editionParam = { pro: data.provinceValue, city: data.cityValue, area: data.areaValue }
    //   resources.schoolList(editionParam).then(response => {
    //     _this.schoolData = response.rows
    //     _this.form.province = data.provinceValue
    //     _this.form.city = data.cityValue
    //     _this.form.area = data.areaValue
    //   })
    //
    // },
    //
    // schoolChange(value) {
    //   if (!value) {
    //     return
    //   } else {
    //     let _this = this
    //     gradeAxios.list().then(response => {
    //       _this.gradeData = response.rows
    //     })
    //   }
    // },
    // gradeChange(value) {
    //   if (!value) {
    //     return
    //   } else {
    //     let _this = this
    //     backAxios.getUserClasses({ gradeId: value }).then(response => {
    //       _this.classData = response.data
    //     })
    //   }
    // },
    // secdCode() {
    //   let _this = this
    //   var  verification = /^1\d{10}$/    //正则表达式
    //   if (_this.form.phoneNumber && _this.form.phoneNumber.length == 11 && verification.test(_this.form.phoneNumber)) {
    //     // smsType说明：1绑定用户信息、2修改密码等
    //     loginAxios.sendSms ({ mobile: _this.form.phoneNumber, smsType: 1 }).then(response => {
    //       _this.$message.success('发送成功')
    //       _this.isSecd = !_this.isSecd
    //       _this.reduceTimer = setInterval(() => {
    //         if (_this.times > 0) {
    //           _this.times--
    //         } else {
    //           clearInterval(_this.reduceTimer)
    //           _this.isSecd = !_this.isSecd
    //           _this.times = 120
    //         }
    //       }, 1000)
    //     })
    //   } else {
    //     _this.$message.error('请输入正确的手机号码')
    //   }
    // },
    //
    // detail(item) {
    //   if (this.user.isBind) {
    //     this.$router.push({ path: '/idc/EvaluationDatabase/detailList', query: {evaluationId: 5386} })
    //   } else {
    //     this.dialogVisible = true
    //   }
    // },
    // getUser() {
    //   getUserProfile().then(response => {
    //     this.user = response.data
    //     setUserInfo(JSON.stringify(response.data))
    //     this.dialogVisible = !response.data.isBind
    //   })
    // },
    // onSubmit() {
    //   if(!this.form.username){
    //        this.$message.error('请输入姓名!')
    //        return
    //   }
    //   if(!this.form.sex){
    //        this.$message.error('请选择性别!')
    //        return
    //   }
    //   if(!this.form.area || !this.form.city ||!this.form.province){
    //        this.$message.error('请选择省市区!')
    //        return
    //   }
    //   if(!this.form.schoolId){
    //        this.$message.error('请选择学校!')
    //        return
    //   }
    //   if(!this.form.gradeId){
    //        this.$message.error('请选择年级!')
    //        return
    //   }
    //   if(!this.form.clazzId){
    //        this.$message.error('请选择班级!')
    //        return
    //   }
    //   if(!this.form.phoneNumber){
    //        this.$message.error('请输入手机号码!')
    //        return
    //   }
    //   if(!this.form.code){
    //        this.$message.error('请输入验证码!')
    //        return
    //   }
    //   let _this = this
    //   this.submitLoading = true
    //   loginAxios.validateSms({ mobile: _this.form.phoneNumber, code: _this.form.code }).then(response => {
    //     if (200 == response.code) {
    //       _this.bindUserInfo()
    //     } else {
    //       this.$message.error(response.msg)
    //         this.submitLoading = false
    //     }
    //   }).catch((err) => {
    //       this.submitLoading = false
    //    })
    // },
    //
    // bindUserInfo() {
    //   let _this = this
    //   loginAxios.improveUserInfo(_this.form).then(response => {
    //     if(response.data.token){
    //       setToken(response.data.token)
    //     }
    //     if (200 == response.code) {
    //       this.dialogVisible = false
    //       _this.getUser()
    //     } else {
    //       this.$message.error(response.msg)
    //     }
    //       this.submitLoading = false
    //   }) .catch((err) => {
    //       this.submitLoading = false
    //   })
    // },
  },
};
</script>

<style scoped  >
/deep/.el-input-group__append button.el-button {
  background: #e6a23c;
  color: #fff;
}

/deep/.el-dialog {
  background: url("../assets/images/img_bg1.png") no-repeat;
  background-size: 100% 100%;
  height: 500px;
  width: 800px;
}
/deep/.el-card__body {
  padding: 0;
}
.header-h {
  background: #47c6a2;
}
/deep/.el-dialog__close {
  color: #fff;
}
p {
  margin: 0;
}
</style>