|
|
@@ -1,100 +1,112 @@
|
|
|
<style lang="scss" scoped>
|
|
|
-.user-test{
|
|
|
+.home-page{
|
|
|
+ padding: 15px 20px;
|
|
|
+ background: #e1e1e1;
|
|
|
+}
|
|
|
+.home-page>div:first-child{
|
|
|
+ height: 300px;
|
|
|
+}
|
|
|
+.home-page>div:last-child{
|
|
|
+ height: 800px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.left,.right{
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ width: 400px;
|
|
|
+}
|
|
|
+.right {
|
|
|
+ width: calc(100% - 410px);
|
|
|
+ margin-left: 10px;
|
|
|
+};
|
|
|
+.card{
|
|
|
height: 100%;
|
|
|
- &>*{
|
|
|
- height: 100%;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- }
|
|
|
- .left-menu{
|
|
|
- width: 100px;
|
|
|
- background: #181a19;
|
|
|
- text-align: center;
|
|
|
- padding: 40px 0;
|
|
|
- color: white;
|
|
|
- .user-info{
|
|
|
- font-size: 15px;
|
|
|
- img{
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- margin: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- &>p{
|
|
|
- display: inline-block;
|
|
|
- padding: 2px 3px;
|
|
|
- border-radius: 10px;
|
|
|
- background: #5fb9c1;
|
|
|
- margin: 15px 0 30px;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
- ul{
|
|
|
- li{
|
|
|
- padding: 15px 0;
|
|
|
- cursor: pointer;
|
|
|
- opacity: 0.8;
|
|
|
- &:hover{
|
|
|
- opacity: 1;
|
|
|
- background: #3a3c3b;
|
|
|
- }
|
|
|
- img{
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .right-content{
|
|
|
- width: calc(100% - 100px);
|
|
|
- }
|
|
|
+ background-color: #ffffff;
|
|
|
+ box-shadow: 0px 0px 4px 0px
|
|
|
+ rgba(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+.card.card2{
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ width: calc(50% - 5px);
|
|
|
+}
|
|
|
+.card .head{
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ border-bottom: solid 1px #e5e5e5;
|
|
|
+ padding: 0 15px;
|
|
|
+}
|
|
|
+.card .head label{
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-stretch: normal;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+.card .head label i{
|
|
|
+ color: #0099ff;
|
|
|
}
|
|
|
</style>
|
|
|
<template>
|
|
|
-<div class="user-test">
|
|
|
- <!-- <div class="left-menu">
|
|
|
- <div class="user-info">
|
|
|
- <img src="@/images/icon/user.png">
|
|
|
- <p>你那么狗</p>
|
|
|
+<div class="home-page">
|
|
|
+ <div>
|
|
|
+ <div class="card card2" style="width: calc(100% - 810px)">
|
|
|
+ <div class="head">
|
|
|
+ <label>待办件（<i>10</i>）</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card card2" style="width: 460px;margin-left:10px">
|
|
|
+ <div class="head">
|
|
|
+ <label>审批数量汇总</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card card2" style="width: 330px;margin-left:10px">
|
|
|
+ <div class="head">
|
|
|
+ <label>审批时效汇总</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="left">
|
|
|
+ <div class="card" style="height: 200px">
|
|
|
+ <div class="head">
|
|
|
+ <label>审批汇总</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card" style="height: 590px;margin-top:10px">
|
|
|
+ <div class="head">
|
|
|
+ <label>行业类别统计</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="card" style="height: 295px">
|
|
|
+ <div class="head">
|
|
|
+ <label>超期预警（<i>10</i>）</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card card2" style="height: 190px;margin-top:10px">
|
|
|
+ <div class="head">
|
|
|
+ <label>项目投资统计</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card card2" style="height: 190px;margin-top:10px;margin-left:10px">
|
|
|
+ <div class="head">
|
|
|
+ <label>工作任务统计</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card" style="height: 295px;margin-top:10px">
|
|
|
+ <div class="head">
|
|
|
+ <label>环评单位列表</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <p>爻象个人中心</p>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <img src="@/images/icon/user.png">
|
|
|
- <p>状态记录</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="@/images/icon/user.png">
|
|
|
- <p>学习提升</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="@/images/icon/user.png">
|
|
|
- <p>社交圈子</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="@/images/icon/user.png">
|
|
|
- <p>个人信息</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="@/images/icon/user.png">
|
|
|
- <p>学习小组</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="@/images/icon/user.png">
|
|
|
- <p>自习室</p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
</div>
|
|
|
- <div class="right-content">
|
|
|
-
|
|
|
- </div> -->
|
|
|
- <button @click="scan">扫一扫</button>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import wx from 'weixin-js-sdk';
|
|
|
-import axios from 'axios';
|
|
|
export default {
|
|
|
name: 'UserTest',
|
|
|
components: {
|
|
|
@@ -104,36 +116,8 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- axios.post(
|
|
|
- 'http://my.service.com/index.php/opcode/6002',{
|
|
|
- url:location.href.split('#')[0]
|
|
|
- }).then((res)=>{
|
|
|
- wx.config({
|
|
|
- debug: true, // 开启调试模式,
|
|
|
- appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
|
|
|
- timestamp: res.timestamp, // 必填，生成签名的时间戳
|
|
|
- nonceStr: res.nonceStr, // 必填，生成签名的随机串
|
|
|
- signature: res.signature,// 必填，签名，见附录1
|
|
|
- jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
|
|
|
- });
|
|
|
- })
|
|
|
},
|
|
|
methods: {
|
|
|
- scan(){
|
|
|
- wx.scanQRCode({
|
|
|
- desc: 'scanQRCode desc',
|
|
|
- needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
|
|
|
- scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
|
|
|
- success : function(res) {
|
|
|
- console.log("调用扫描成功",res);
|
|
|
- var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
|
|
|
- alert("扫码结果为：" + result);
|
|
|
- },
|
|
|
- error:function(res){
|
|
|
- console.log(res)
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
