|
|
@@ -1,20 +1,40 @@
|
|
|
<template>
|
|
|
- <div class="works-time">
|
|
|
+ <div class="Nfc">
|
|
|
<nav-bar></nav-bar>
|
|
|
-
|
|
|
+ <div class="nfc-container">
|
|
|
+ <div class="nfc-box">
|
|
|
+ <div class="nfc-btn" @touchend="getNfc">
|
|
|
+ <span>点击扫描</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Card>
|
|
|
+ <p class="card-title blue">标签信息</p>
|
|
|
+ <van-cell-group v-if="!disable" :border="false">
|
|
|
+ <van-cell title="NFC编码" value="内容" />
|
|
|
+ <van-cell title="所属机构" value="内容" is-link/>
|
|
|
+ <van-cell title="区域名称" value="内容" is-link/>
|
|
|
+ <van-cell title="采集点名称" value="内容" is-link/>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group v-else :border="false">
|
|
|
+ <van-cell title="NFC编码" value="内容" />
|
|
|
+ <van-cell title="所属机构" value="内容" />
|
|
|
+ <van-cell title="区域名称" value="内容" />
|
|
|
+ <van-cell title="采集点名称" value="内容" />
|
|
|
+ </van-cell-group>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import NavBar from '@/components/NavBar';
|
|
|
+import Card from '@/components/card';
|
|
|
import {mapGetters} from "vuex";
|
|
|
-import {deptTreeList} from "@/api/public";
|
|
|
-import {editWorkTime} from "@/views/menu/workTime/api";
|
|
|
export default {
|
|
|
- components:{NavBar},
|
|
|
+ components:{NavBar,Card},
|
|
|
data(){
|
|
|
return{
|
|
|
-
|
|
|
+ disable:false,
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -24,28 +44,83 @@ export default {
|
|
|
...mapGetters(['orgName','orgId']),
|
|
|
},
|
|
|
methods:{
|
|
|
-
|
|
|
+ getNfc(){
|
|
|
+ alert('扫描')
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .works-time{
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- .form-box{
|
|
|
- height: calc(100vh - 180px);
|
|
|
- padding: 0 30px 50px 30px;
|
|
|
+ .nfc-container{
|
|
|
+ padding:0 20px 20px 20px;
|
|
|
+ height: calc(100vh - 192px);
|
|
|
+ -border: 1px solid red;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
- .radio-box{
|
|
|
- height: 100px;
|
|
|
- padding: 30px;
|
|
|
+ .card-title{
|
|
|
+ height: 60px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 32px;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ }
|
|
|
+ .nfc-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding:0 20px;
|
|
|
+ margin-top:24px;
|
|
|
+ >div{
|
|
|
+ width: 500px;
|
|
|
+ height: 500px;
|
|
|
+ background-color: rgba(0, 140, 214, 0.69);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ >span{
|
|
|
+ font-size: 32px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue{
|
|
|
+ color:#008cd6;
|
|
|
}
|
|
|
- .org-name{
|
|
|
- font-size: 30px;
|
|
|
- line-height: 80px;
|
|
|
- height: 80px;
|
|
|
- text-align: center;
|
|
|
+ .nfc-btn {
|
|
|
+ /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
|
|
|
+ animation: donghua 2.4s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nfc-btn {
|
|
|
+ margin: 60px;
|
|
|
+ width: 32%;
|
|
|
+ height: 48vh;
|
|
|
+ background: linear-gradient(-45deg, #dae, #3c9, #09f, #66f);
|
|
|
+ background-size: 200% 200%;
|
|
|
}
|
|
|
+ .nfc-btn:active {
|
|
|
+ animation: none;
|
|
|
+ background: #09f;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes donghua {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1);
|
|
|
+ /* 注意rgba中的a的设置 */
|
|
|
+ box-shadow: 0 0 0 0 rgba(204, 73, 152, 60%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 60% {
|
|
|
+ transform: scale(1);
|
|
|
+ box-shadow: 0 0 0 18px rgba(204, 73, 152, 0%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|