uniapp悬浮可拖拽按钮

1. <template>
3.         <view class="content" :style="{height:QHeight + 'px', backgroundImage: `url(${bgUrl})` }">
5.                 <view class="" @click="msgClick()" style="">
6.                         <view class="badge-box" :style="{top:jnTop + 'px'}">
7.                                 <image :src="xiaoxiUrl" class="xiaoxi-img" mode=""></image>
8.                                 <u-badge numberType="overflow" :offset="[10,jnLeft]" type="error" :absolute="true" max="99"
9.                                         :value="msgValue"></u-badge>
10.                         </view>
11.                 </view>
12.                 <view class="box">
13.                         <!-- <image :src="bannerUrl"  mode=""></image> -->
14.                         <view class="pjpm-box1">
15.                                 <view class="left">
16.                                         <view class="pm-icon-box">
17.                                                 <image :src="iconUrl1" class="pm-icon-new" mode=""></image>
18.                                         </view>
19.                                         <view class="pm-name">
20.                                                 评价排名
21.                                         </view>
22.                                 </view>
23.                                 <view class="right" @click="goRanking()">
24.                                         <view class="" style="margin-right: 10px;">
25.                                                 查看
26.                                         </view>
27.                                         <image :src="jtNewUrl" class="jt-img" mode=""></image>
28.                                 </view>
29.                         </view>
30.                         <!-- 我的评价 -->
31.                         <view class="pjpm-box-content">
32.                                 <view class="pjpm-box">
33.                                         <view class="left">
34.                                                 <view class="pm-icon-box">
35.                                                         <image :src="iconUrl2" class="pm-icon" mode=""></image>
36.                                                 </view>
37.                                                 <view class="pm-name">
38.                                                         我的评价
39.                                                 </view>
40.                                         </view>
41.                                         <view class="right" @click="goEvaluateRecord()">
42.                                                 <view class="">
43.                                                         更多
44.                                                 </view>
45.                                                 <image :src="jtUrl" class="jt-img" mode=""></image>
46.                                         </view>
47.                                 </view>
48.                                 <view class="mescorll-box">
49.                                         <view class="pj-content">
51.                                                 <swiper class="swiper" v-if="recordList&&recordList.length > 0"
52.                                                         :style="{ height: swiperHeightMine + 'px' }" circular :vertical="false"
53.                                                         :indicator-dots="false" :autoplay="true" :interval="interval" :duration="duration">
54.                                                         <swiper-item v-for="item in recordList" :key="item.id">
55.                                                                 <view class="card-mine" @click="detailPage(item)">
56.                                                                         <view class="status-box">
57.                                                                                 <image :src="ytjUrl" v-if="item.evaluationStatus === 0" class="status-icon"
58.                                                                                         mode=""></image>
59.                                                                                 <image :src="slzUrl" v-if="item.evaluationStatus === 1" class="status-icon"
60.                                                                                         mode=""></image>
61.                                                                                 <image :src="ybhUrl" v-if="item.evaluationStatus === 2" class="status-icon"
62.                                                                                         mode=""></image>
63.                                                                                 <image :src="slzUrl" v-if="item.evaluationStatus === 3" class="status-icon"
64.                                                                                         mode=""></image>
65.                                                                                 <image :src="ywcUrl" v-if="item.evaluationStatus === 4" class="status-icon"
66.                                                                                         mode=""></image>
67.                                                                                 <image :src="ygbUrl" v-if="item.evaluationStatus === 5" class="status-icon"
68.                                                                                         mode=""></image>
70.                                                                         </view>
71.                                                                         <view class="line ">
72.                                                                                 <view class="name-text">
73.                                                                                         被评价单位类型：
74.                                                                                 </view>
75.                                                                                 <view class="text-value">
76.                                                                                         {
77.   
78.   {item.evaluatedType}}
79.                                                                                 </view>
81.                                                                         </view>
82.                                                                         <view class="line ">
83.                                                                                 <view class="name-text">
84.                                                                                         评价时间：
85.                                                                                 </view>
86.                                                                                 <view class="text-value">
87.                                                                                         {
88.   
89.   {item.createTime}}
90.                                                                                 </view>
92.                                                                         </view>
93.                                                                         <view class="line ">
94.                                                                                 <view class="name-text">
95.                                                                                         处理结果：
96.                                                                                 </view>
97.                                                                                 <view class="text-value">
98.                                                                                         <view class="line-two" v-if="item.evaluationStatus === 0"></view>
99.                                                                                         <view class="line-two"
100.                                                                                                 v-if="item.evaluationStatus === 1&&item.circulationReason != null">
101.                                                                                                 {
102.   
103.   {item.circulationReason}}
104.                                                                                         </view>
105.                                                                                         <view class="line-two"
106.                                                                                                 v-if="item.evaluationStatus === 2&&item.rejectReason != null">
107.                                                                                                 {
108.   
109.   {item.rejectReason}}
110.                                                                                         </view>
111.                                                                                         <view class="line-two"
112.                                                                                                 v-if="item.evaluationStatus === 3&&item.handleReason != null">
113.                                                                                                 {
114.   
115.   {item.handleReason}}
116.                                                                                         </view>
117.                                                                                         <view class="line-two"
118.                                                                                                 v-if="item.evaluationStatus === 4&&item.checkReason != null">
119.                                                                                                 {
120.   
121.   {item.checkReason}}
122.                                                                                         </view>
123.                                                                                         <view class="line-two"
124.                                                                                                 v-if="item.evaluationStatus === 5&&item.checkReason != null">
125.                                                                                                 {
126.   
127.   {item.checkReason}}
128.                                                                                         </view>
129.                                                                                 </view>
130.                                                                         </view>
132.                                                                 </view>
133.                                                         </swiper-item>
134.                                                 </swiper>
135.                                                 <view v-else class="card-class-null">
136.                                                         <image :src="nullUrl" class="null-class" mode=""></image>
137.                                                         <view class="null-name">
138.                                                                 暂无评价内容
139.                                                         </view>
140.                                                 </view>
141.                                         </view>
142.                                 </view>
143.                         </view>
145.                         <!-- 评价标准 -->
147.                         <view class="pjpm-box-content">
148.                                 <view class="pjpm-box">
149.                                         <view class="left">
150.                                                 <view class="pm-icon-box">
151.                                                         <image :src="iconUrl3" class="pm-icon" mode=""></image>
152.                                                 </view>
153.                                                 <view class="pm-name">
154.                                                         评价标准
155.                                                 </view>
156.                                         </view>
157.                                         <view class="right" @click="goEvaluate()">
158.                                                 <view class="">
159.                                                         更多
160.                                                 </view>
161.                                                 <image :src="jtUrl" class="jt-img" mode=""></image>
162.                                         </view>
163.                                 </view>
164.                                 <view class="mescorll-box">
165.                                         <view class="pj-content">
166.                                                 <swiper class="swiper" :style="{ height: swiperHeight + 'px' }" circular :vertical="false"
167.                                                         :indicator-dots="false" :autoplay="true" :interval="interval" :duration="duration">
168.                                                         <swiper-item v-for="item in entryEntitylist" :key="item.id">
169.                                                                 <view class="card-class" id="swiperHeight">
170.                                                                         <view class="line ">
171.                                                                                 <view class="ms-name">
172.                                                                                         评价单位类型：
173.                                                                                 </view>
174.                                                                                 <view class="text-value">
175.                                                                                         {
176.   
177.   {item.evaluationType}}
178.                                                                                 </view>
180.                                                                         </view>
181.                                                                         <view class="line ">
182.                                                                                 <view class="ms-name">
183.                                                                                         被评价单位类型：
184.                                                                                 </view>
185.                                                                                 <view class="text-value">
186.                                                                                         {
187.   
188.   {item.evaluatedType}}
189.                                                                                 </view>
191.                                                                         </view>
192.                                                                         <view class="line ">
193.                                                                                 <view class="ms-name">
194.                                                                                         业务阶段：
195.                                                                                 </view>
196.                                                                                 <view class="text-value">
197.                                                                                         {
198.   
199.   {item.stage}}
200.                                                                                 </view>
202.                                                                         </view>
203.                                                                         <view class="line ">
204.                                                                                 <view class="ms-name">
205.                                                                                         评价指标：
206.                                                                                 </view>
207.                                                                                 <view class="text-value">
208.                                                                                         {
209.   
210.   {item.target}}
211.                                                                                 </view>
213.                                                                         </view>
214.                                                                         <view class="line ">
215.                                                                                 <view class="ms-name">
216.                                                                                         指标描述：
217.                                                                                 </view>
218.                                                                                 <view class="text-value line-two">
219.                                                                                         {
220.   
221.   {item.content}}
222.                                                                                 </view>
223.                                                                         </view>
224.                                                                 </view>
225.                                                         </swiper-item>
226.                                                 </swiper>
227.                                         </view>
228.                                 </view>
229.                         </view>
232.                 </view>
233.                 <view class="home-content">
237.                 </view>
238.                 <!-- <view id="floatingImg" class="float-btn" :style="{ position: 'absolute', left: imgX + 'px', top: imgY + 'px' }"
239.                         @mouseover="stopFloat" @mouseout="startFloat" @click="goAddEvaluation()">
240.                         <view class="">
241.                                 我要
242.                         </view>
243.                         <view class="">
244.                                 评价
245.                         </view>
246.                 </view> -->
247.                 <!-- 悬浮按钮 -->
248.                 <!--movable-area 必须设置width和height属性，不设置默认为10px**-->
249.                 <!--下面的out-of-bounds允许绿块超过可移动区域，overflow: hidden是为了隐藏超出的部分-->
250.                 <movable-area class="movable-area">
251.                         <movable-view direction="all" inertia x="1200rpx" y="1200rpx" out-of-bounds class="xf-btn">
252.                                 <view style="margin: 0 auto;text-align: center;pointer-events:auto;" @click="goAddEvaluation()">
253.                                         <image :src="addPjUrl" style="width: 60px;height: 60px;" mode=""></image>
255.                                 </view>
256.                         </movable-view>
257.                 </movable-area>
258.         </view>
261. </template>
263. <script>
264.         import configService from "@/utils/config.js";
265.         import moment from 'moment';
266.         import request from "@/utils/request.js";
267.         import businessApi from '../../api/business.js'
268.         import {
269.                 data
270.         } from "../../uni_modules/uview-ui/libs/mixin/mixin.js";
271.         export default {
272.                 components: {
274.                 },
275.                 data() {
276.                         return {
277.                                 imgX: 50,
278.                                 imgY: 60,
279.                                 step: 1,
280.                                 delay: 10,
281.                                 xin: true,
282.                                 yin: true,
283.                                 intervalPf: null,
284.                                
285.                                
286.                                 pmHeight:0,
287.                                 pmWidth:0,
288.                                 ytjUrl: configService.imgUrl + '/ytj.png',
289.                                 ywcUrl: configService.imgUrl + '/ywc.png',
290.                                 ybhUrl: configService.imgUrl + '/ybh.png',
291.                                 slzUrl: configService.imgUrl + '/slz.png',
292.                                 ygbUrl: configService.imgUrl + '/ygb.png',
293.                                 jnLeft: 328,
294.                                 jnTop: 50,
295.                                 recordList: [],
296.                                 swiperHeightMine: 150,
297.                                 swiperHeight: 230,
298.                                 indicatorDots: true,
299.                                 autoplay: true,
300.                                 interval: 2000,
301.                                 duration: 500,
302.                                 queryParams: {
303.                                         pageNo: 1,
304.                                         pageSize: 10,
305.                                         readFlag: 'N',
306.                                 },
307.                                 msgValue: 0,
308.                                 xiaoxiUrl: configService.imgUrl + '/xiaoxi.png',
309.                                 nullUrl: configService.imgUrl + '/null.png',
310.                                 addPjUrl: configService.imgUrl + '/addpj.png',
311.                                 bgUrl: configService.imgUrl + '/bg.png',
312.                                 iconUrl1: configService.imgUrl + '/pm.png',
313.                                 iconUrl2: configService.imgUrl + '/2.png',
314.                                 iconUrl3: configService.imgUrl + '/jl.png',
315.                                 jtNewUrl: configService.imgUrl + '/jtnew.png',
316.                                 jtUrl: configService.imgUrl + '/jt.png',
317.                                 pmUrl: configService.imgUrl + '/pm.png',
318.                                 bannerUrl: configService.imgUrl + '/banner.png',
319.                                 firstDay: '',
320.                                 lastDayOfNextMonth: '',
321.                                 currentDate: new Date(),
322.                                 dataForm: {
323.                                         pageNo: 1,
324.                                         pageSize: 10,
325.                                         startTime: '',
326.                                         endTime: '',
327.                                 },
328.                                 entryEntitylist: [],
329.                                 phone: '',
330.                                 time: 5,
331.                                 timeS: 5,
332.                                 QHeight: 0,
333.                                 loginForm: {
334.                                         tenantId: '000000',
335.                                         account: '',
336.                                         password: '',
337.                                 },
339.                                 agreementChecked: false,
340.                                 code: '',
342.                                 password: '',
343.                                 //验证码
344.                                 codeText: '获取验证码',
345.                                 //验证码已发
346.                                 readonly: false,
347.                                 btnShow: false,
348.                                 clearTime: null,
349.                         }
350.                 },
351.                 computed: {
353.                 },
354.                 created() {},
356.                 onReady() {
357.                         //获取当前header高度
358.                         //具体需要放到onReady中
359.                         setTimeout(() => {
360.                                 this.$nextTick(() => {
361.                                         uni.createSelectorQuery().select('#swiperHeight').boundingClientRect(data => {
362.                                                 console.log('11111111data---', data.height);
363.                                                 if (data) {
364.                                                         this.swiperHeight = data.height + 40
365.                                                 }
366.                                         }).exec()
368.                                 })
370.                         }, 2000)
375.                 },
376.                 onShow() {
377.                         this.getMsg()
378.                         this.init()
379.                         //进入页面不触发获取数据  改变的时候触发
380.                         const windowResizeCallback = (res) => {
381.                           console.log('变化后的窗口宽度=' + res.size.windowWidth)
382.                           console.log('变化后的窗口高度=' + res.size.windowHeight)
383.                           this.pmWidth=res.size.windowWidth
384.                           this.pmHeight=res.size.windowHeight
385.                         }
386.                         uni.onWindowResize(windowResizeCallback)
390.                 },
391.                 onLoad(e) {
392.                         this.startFloat();
394.                         let rect = wx.getMenuButtonBoundingClientRect();
395.                         console.log(rect)
396.                         this.jnTop = rect.top - 5
397.                         this.jnLeft = rect.right - 30
401.                         uni.getSystemInfo({
402.                                 success: (res) => {
403.                                         console.log('res---', res.windowWidth,res.windowHeight);
404.                                        
405.                                         let height = res.windowHeight - uni.upx2px(0);
406.                                         this.QHeight = height;
407.                                 }
408.                         })
410.                 },
411.                 onUnload() {
413.                 },
414.                 methods: {
415.                         float() {
416.                                 const L = 0;
417.                                 const T = 0;
418.                                 const R = uni.getSystemInfoSync().windowWidth - 80; // 50为图片宽度
419.                                 const B = uni.getSystemInfoSync().windowHeight - 80; // 50为图片高度
420.                        
421.                                 this.imgX += this.step * (this.xin ? 1 : -1);
422.                                 this.imgY += this.step * (this.yin ? 1 : -1);
423.                        
424.                                 if (this.imgX < L) {
425.                                         this.xin = true;
426.                                         this.imgX = L;
427.                                 }
428.                                 if (this.imgX > R) {
429.                                         this.xin = false;
430.                                         this.imgX = R;
431.                                 }
432.                                 if (this.imgY < T) {
433.                                         this.yin = true;
434.                                         this.imgY = T;
435.                                 }
436.                                 if (this.imgY > B) {
437.                                         this.yin = false;
438.                                         this.imgY = B;
439.                                 }
440.                         },
441.                         startFloat() {
442.                                 this.intervalPf = setInterval(this.float, this.delay);
443.                         },
444.                         stopFloat() {
445.                                 clearInterval(this.intervalPf);
446.                         },
447.                         detailPage(item) {
448.                                 uni.navigateTo({
449.                                         url: '/pages/evaluateRecord/details?id=' + item.id
450.                                 });
451.                         },
452.                         upper: function(e) {
453.                                 console.log(e)
454.                         },
455.                         lower: function(e) {
456.                                 console.log(e)
457.                         },
458.                         scroll: function(e) {
459.                                 console.log(e)
460.                                 this.old.scrollTop = e.detail.scrollTop
461.                         },
462.                         goTop: function(e) {
463.                                 // 解决view层不同步的问题
464.                                 this.scrollTop = this.old.scrollTop
465.                                 this.$nextTick(function() {
466.                                         this.scrollTop = 0
467.                                 });
468.                                 uni.showToast({
469.                                         icon: "none",
470.                                         title: "纵向滚动 scrollTop 值已被修改为 0"
471.                                 })
472.                         },
473.                         goAddEvaluation() {
474.                                 uni.navigateTo({
475.                                         url: '/pages/evaluateRecord/addEvaluation'
476.                                 });
478.                         },
479.                         // 未读消息数量
480.                         getMsg() {
481.                                 businessApi.getTzMsg(this.queryParams).then((res) => {
482.                                         this.msgValue = res.data.totalRows
483.                                 }).catch(res => {
486.                                 })
488.                         },
489.                         firstDayOfLastMonth() {
490.                                 const currentYear = this.currentDate.getFullYear();
491.                                 const currentMonth = this.currentDate.getMonth() - 1;
492.                                 this.firstDay = new Date(currentYear, currentMonth, 1);
493.                                 return this.firstDay;
494.                         },
495.                         lastDayOfLastMonth() {
496.                                 const currentYear = this.currentDate.getFullYear();
497.                                 const currentMonth = this.currentDate.getMonth() - 1;
498.                                 const nextMonth = currentMonth + 1;
499.                                 this.lastDayOfNextMonth = new Date(currentYear, nextMonth, 0);
500.                                 return this.lastDayOfNextMonth;
501.                         },
502.                         init() {
503.                                 this.firstDayOfLastMonth()
504.                                 this.lastDayOfLastMonth()
505.                                 this.dataForm.startTime = moment(this.firstDay).format('YYYY-MM-DD')
506.                                 this.dataForm.endTime = moment(this.lastDayOfNextMonth).format('YYYY-MM-DD')
507.                                 businessApi.getStandardHome(this.dataForm).then((res) => {
508.                                         this.entryEntitylist = res.data.rows
509.                                 })
510.                                 this.recordForm = {
511.                                         pageNo: 1,
512.                                         pageSize: 999,
513.                                         evaluationTitle: '',
514.                                         // startTime: moment(this.currentDate).format('YYYY-MM-DD HH:mm:ss'),
516.                                 }
517.                                 businessApi.getEvaluationList(this.recordForm).then((res) => {
518.                                         this.recordList = res.data.rows
521.                                 }).catch(res => {
524.                                 })
527.                         },
528.                         msgClick() {
529.                                 uni.navigateTo({
530.                                         url: '/pages/message/message'
531.                                 });
533.                         },
534.                         onNavigationBarButtonTap(e) {
535.                                 uni.navigateTo({
536.                                         url: '/pages/message/message'
537.                                 });
539.                         },
540.                         goRanking() {
541.                                 uni.navigateTo({
542.                                         url: '/pages/ranking/ranking'
543.                                 });
544.                         },
545.                         goEvaluateRecord() {
546.                                 uni.switchTab({
547.                                         url: '/pages/evaluateRecord/evaluateRecord'
548.                                 });
550.                         },
551.                         goEvaluate() {
552.                                 uni.navigateTo({
553.                                         url: '/pages/evaluate/evaluate'
554.                                 });
556.                         },
559.                 }
560.         }
561. </script>
562. <style>
563.         page {
564.                 background-color: #EFEFEF;
565.         }
566. </style>
568. <style lang="scss" scoped>
569.         /* 可以根据需要添加样式 */
570.         .float-btn {
571.                 // width: 100rpx;
572.                 height: 100rpx;
573.                 text-align: center;
574.                 letter-spacing: 6px;
575.                 font-weight: 900;
576.                 padding: 10px 5px 5px 11px;
577.                 font-size: 18px;
578.                 color: rgb(220, 2, 2);
579.                 background: #fff;
580.                 box-shadow: 3rpx 4rpx 8rpx 4rpx rgba(231, 68, 52, 0.54);
581.                 border-radius: 4px;
582.                 position: fixed;
583.         }
584.         .movable-area {
585.           //  可移动的范围
586.           height: 100vh;
587.           width: 750rpx;
588.           top: 0;
589.           position: fixed;
590.           pointer-events: none; //鼠标事件可以渗透
591.         }
592.         .xf-btn {
593.                 width: 120rpx;
594.                 height: 110rpx;
595.                 color: #fff;
596.                 font-size: 14px;
597.                 border-radius: 10px
598.         }
600.         .centermain {
601.                 flex: 1;
602.                 color: #fff;
603.                 display: flex;
604.                 align-items: center;
605.         }
607.         .pm-icon-new {
608.                 margin-right: 10px;
609.                 width: 48px;
610.                 height: 48px;
611.                 padding: 5px 0;
613.         }
615.         .uni-swiper {
616.                 height: 500px;
617.                 /* 你想要的高度 */
618.         }
620.         .badge-box {
621.                 // display: flex;
622.                 // justify-content: end;
623.                 padding: 15px 0 10px 0;
624.                 position: relative;
625.                 left: 10px;
626.                 // text-align: right;
627.                 // margin-right: 15px;
628.                 // position: relative;
630.                 .xiaoxi-img {
631.                         position: absolute;
632.                         left: 0px;
633.                         top: 15px;
634.                         margin-right: 10px;
635.                         width: 25px;
636.                         height: 25px;
637.                 }
640.         }
643.         .img-msg {
644.                 width: 20px;
645.                 height: 20px;
647.         }
649.         .item {
650.                 flex: 1;
651.                 background: #1E70EF;
652.         }
654.         .item1 {
655.                 flex: 1;
656.                 background: #1E70EF;
657.         }
659.         .item2 {
660.                 flex: 1;
661.                 background: #1E70EF;
662.         }
664.         .item3 {
665.                 flex: 1;
666.                 background: #1E70EF;
667.         }
669.         // 表单
670.         .login-form {
671.                 width: 96%;
672.                 padding-top: 50px;
673.                 margin: 0 auto;
675.                 .foget-text {
676.                         height: 30rpx;
677.                         font-size: 26rpx;
679.                         margin: 40rpx;
680.                         text-align: right;
681.                         color: #3F86F5;
682.                 }
684.                 .input_box {
686.                         // display: flex;
687.                         align-items: center;
688.                         height: 104rpx !important;
689.                         // background-color: #f8f9fb;
690.                         // border-radius: 8rpx;
691.                         border-bottom: solid 2rpx #efeef4;
692.                         padding: 20rpx 0rpx;
693.                         margin: 20rpx 20px 0px 20px;
695.                         .btn-color {
696.                                 font-family: PingFang SC, PingFang SC;
697.                                 font-weight: 400;
698.                                 font-size: 14px;
699.                                 color: #004FFF;
700.                                 line-height: 20px;
701.                                 text-align: right;
702.                                 font-style: normal;
703.                                 text-transform: none;
704.                         }
706.                         .phone-name {
707.                                 margin-right: 20px;
708.                                 font-family: "Source Han Sans CN Medium";
709.                                 font-weight: 500;
710.                                 font-size: 16px;
711.                                 color: #000;
712.                                 line-height: 30px;
713.                                 text-align: left;
714.                                 font-style: normal;
715.                                 text-transform: none;
717.                         }
719.                         image {
720.                                 width: 36rpx;
721.                                 height: 24rpx;
722.                         }
724.                         input {
725.                                 flex: 1;
726.                                 font-size: 28rpx;
727.                                 color: #333;
728.                                 height: 60rpx;
729.                         }
731.                         .input_item {
732.                                 font-size: 28rpx;
733.                                 border: 0px;
734.                                 flex: 1;
735.                                 background-color: #f8f9fb;
736.                                 height: 88rpx;
737.                                 width: 100%;
738.                                 outline: none;
739.                                 //margin-left: 32rpx;
740.                         }
742.                         button {
743.                                 height: 60rpx;
744.                                 background-color: #f8f9fb;
745.                                 font-size: 28rpx;
746.                                 padding: 0 14rpx;
747.                                 // color: $themeColor;
748.                                 line-height: 60rpx;
749.                                 margin-left: 20rpx;
750.                                 //margin-right: 40rpx;
751.                         }
753.                         .grey {
754.                                 color: #999999;
755.                         }
756.                 }
758.                 .btn_box {
759.                         margin-top: 60rpx;
761.                         button {
762.                                 width: 319px;
763.                                 height: 46px;
764.                                 color: #fff;
765.                                 border-radius: 23px;
766.                                 background: linear-gradient(126.22deg, #279bff 0%, #2c84f6 100%);
768.                         }
769.                 }
771.                 .btn_zc {
772.                         margin-top: 40rpx;
774.                         uni-button:after {
775.                                 border: none !important;
776.                         }
778.                         button {
779.                                 width: 319px;
780.                                 height: 46px;
781.                                 font-family: "Source Han Sans CN";
782.                                 font-weight: 400;
783.                                 font-size: 16px;
784.                                 letter-spacing: 0;
785.                                 text-align: center;
786.                                 color: #909090;
787.                                 border-radius: 23px;
788.                                 background: #f1f1f1;
790.                         }
791.                 }
793.         }
795.         .content {
796.                 width: 100%;
797.                 // background: url("http://18.0.13.195:443/miniProgramImage/homebg.png") center center no-repeat;
798.                 background-size: cover;
799.                 position: relative;
801.                 .box {
802.                         width: 100%;
803.                         height: auto;
804.                         position: absolute;
805.                         top: 30%;
806.                         // padding-bottom: 50px;
808.                         .banner {
809.                                 width: 100%;
810.                                 height: 220px;
812.                                 // margin-top: 10px;
813.                         }
815.                         .pm-img-box {
816.                                 margin: 10px auto;
817.                                 width: 100%;
819.                                 .pm-img {
820.                                         width: 100%;
821.                                         height: 80px;
823.                                 }
824.                         }
826.                         .pjpm-box-content {
827.                                 width: 96%;
828.                                 margin: 10px auto;
830.                                 .mescorll-box {
831.                                         width: 100%;
832.                                         overflow-y: scroll;
833.                                         box-sizing: border-box;
834.                                         // overflow: scroll;
835.                                         background: #fff;
836.                                         padding-bottom: 10px;
837.                                         height: auto;
838.                                         // padding-bottom: 60px;
839.                                         // height: calc(100vh - 360px);
841.                                         .pj-content {
842.                                                 width: 100%;
843.                                                 height: auto;
844.                                                 margin: 0 auto;
845.                                                 text-align: center;
846.                                                 // padding: 10px;
847.                                                 box-sizing: border-box;
849.                                                 .card-class-null {
850.                                                         margin: 10px;
851.                                                         padding: 3px 8px;
852.                                                         box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
853.                                                         height: auto;
855.                                                         .null-class {
856.                                                                 width: 60px;
857.                                                                 height: 60px;
858.                                                                 margin-top: 30px;
859.                                                         }
861.                                                         .null-name {
862.                                                                 margin-bottom: 30px;
863.                                                                 font-size: 12px;
864.                                                                 color: #828282;
865.                                                         }
867.                                                 }
871.                                                 .card-class {
872.                                                         margin: 10px;
873.                                                         padding: 3px 8px;
874.                                                         box-shadow: rgba(0, 128, 255, 0.11) 0px 0px 3px 1px;
875.                                                         height: auto;
876.                                                 }
878.                                                 .name-text {
879.                                                         min-width: 80px;
880.                                                 }
882.                                                 .card-mine {
883.                                                         margin: 10px;
884.                                                         padding: 3px 8px;
885.                                                         box-shadow: rgba(0, 128, 255, 0.11) 0px 0px 3px 1px;
886.                                                         height: auto;
887.                                                         position: relative;
888.                                                 }
890.                                                 .status-box {
891.                                                         position: absolute;
892.                                                         top: 0;
893.                                                         right: 0;
895.                                                         .status-icon {
896.                                                                 width: 47px;
897.                                                                 height: 47px;
898.                                                         }
900.                                                 }
902.                                                 .line {
903.                                                         font-family: "Source Han Sans CN";
904.                                                         font-weight: 400;
905.                                                         font-size: 14px;
906.                                                         line-height: 20px;
907.                                                         letter-spacing: 0.02px;
908.                                                         text-align: left;
909.                                                         color: #909090;
910.                                                         margin: 10px 0;
911.                                                         display: flex;
913.                                                         .ms-name {
914.                                                                 min-width: 85px;
915.                                                         }
917.                                                         .line-two {
918.                                                                 overflow: hidden;
919.                                                                 text-overflow: ellipsis;
920.                                                                 /*将对象作为弹性伸缩盒子模型显示*/
921.                                                                 display: -webkit-box;
922.                                                                 /*限制文本行数*/
923.                                                                 -webkit-line-clamp: 2;
924.                                                                 /*子元素的排列方式*/
925.                                                                 -webkit-box-orient: vertical;
926.                                                                 /*将对象作为弹性伸缩盒子模型显示*/
928.                                                         }
931.                                                         .text-value {
932.                                                                 color: #000;
933.                                                         }
935.                                                 }
936.                                         }
939.                                 }
942.                         }
944.                         .pjpm-box {
945.                                 height: 50px;
946.                                 width: 100%;
947.                                 box-sizing: border-box;
948.                                 padding: 0 10px;
949.                                 margin: 0px auto;
950.                                 display: flex;
951.                                 align-items: center;
952.                                 justify-content: space-between;
953.                                 background-color: #fff;
955.                                 .left {
957.                                         display: flex;
958.                                         align-items: center;
960.                                         .pm-name {
961.                                                 font-family: "Source Han Sans CN Medium";
962.                                                 font-weight: 900;
963.                                                 font-size: 14px;
964.                                                 letter-spacing: 0.02px;
965.                                                 text-align: left;
966.                                                 color: #000;
968.                                         }
971.                                         .pm-icon {
972.                                                 margin-right: 10px;
973.                                                 width: 28px;
974.                                                 height: 28px;
977.                                         }
979.                                 }
981.                                 .right {
983.                                         display: flex;
984.                                         font-family: "Source Han Sans CN";
985.                                         font-weight: 400;
986.                                         font-size: 14px;
987.                                         letter-spacing: 0.02px;
988.                                         text-align: right;
989.                                         color: #909090;
991.                                         align-items: center;
993.                                         .jt-img {
994.                                                 height: 16px;
995.                                                 width: 16px;
997.                                         }
998.                                 }
1000.                         }
1002.                         .pjpm-box1 {
1003.                                 height: auto;
1004.                                 border-radius: 4px;
1005.                                 width: 96%;
1006.                                 box-sizing: border-box;
1007.                                 padding: 0 10px;
1008.                                 margin: 0px auto;
1009.                                 display: flex;
1010.                                 align-items: center;
1011.                                 justify-content: space-between;
1012.                                 background-color: #fff;
1014.                                 .left {
1016.                                         display: flex;
1017.                                         align-items: center;
1019.                                         .pm-name {
1020.                                                 font-family: "Source Han Sans CN Medium";
1021.                                                 font-weight: 900;
1022.                                                 font-size: 16px;
1023.                                                 letter-spacing: 0.02px;
1024.                                                 text-align: left;
1025.                                                 color: #000;
1027.                                         }
1029.                                         .pm-icon {
1030.                                                 margin-right: 10px;
1031.                                                 width: 28px;
1032.                                                 height: 28px;
1035.                                         }
1037.                                 }
1039.                                 .right {
1041.                                         display: flex;
1042.                                         font-family: "Source Han Sans CN";
1043.                                         font-weight: 400;
1044.                                         font-size: 14px;
1045.                                         letter-spacing: 0.02px;
1046.                                         text-align: right;
1047.                                         color: #909090;
1049.                                         align-items: center;
1051.                                         .jt-img {
1052.                                                 height: 16px;
1053.                                                 width: 16px;
1055.                                         }
1056.                                 }
1058.                         }
1061.                         .info-box {
1062.                                 display: flex;
1063.                                 margin: 0 auto;
1065.                                 .info-img {
1066.                                         position: absolute;
1067.                                         width: 42px;
1068.                                         height: 42px;
1069.                                         right: 10px;
1070.                                         bottom: 0px;
1072.                                 }
1074.                                 .title-one {
1075.                                         font-weight: 900;
1076.                                         font-size: 16px;
1077.                                 }
1079.                                 .title-two {
1080.                                         color: #ADADAD;
1081.                                         font-size: 12px;
1082.                                         margin: 5px 0;
1083.                                 }
1085.                                 .info-left {
1086.                                         width: 50%;
1087.                                         position: relative;
1088.                                         box-sizing: border-box;
1089.                                         padding: 10px;
1090.                                         margin: 0 5px 0 10px;
1091.                                         height: 86px;
1092.                                         background: linear-gradient(135.31deg, #f9fdff 0%, #e8f5fc 58.92%, #d8f1ff 100%);
1093.                                         filter: drop-shadow(0 0 6px #0000000f);
1096.                                 }
1098.                                 .info-right {
1099.                                         width: 50%;
1100.                                         box-sizing: border-box;
1101.                                         padding: 10px;
1102.                                         margin: 0 5px 0 10px;
1103.                                         height: 86px;
1104.                                         background: linear-gradient(135.31deg, #fffef9 0%, #fbf2de 57.58%, #faeed4 100%);
1105.                                         filter: drop-shadow(0 0 6px #0000000f);
1107.                                 }
1108.                         }
1109.                 }
1111.                 .home-content {
1112.                         padding-bottom: 60px;
1116.                         .title-box {
1117.                                 display: flex;
1118.                                 width: 100%;
1119.                                 align-items: center;
1120.                                 padding: 0 10px;
1121.                                 margin: 10px 0;
1123.                                 .text-name {
1124.                                         font-family: "Source Han Sans CN Medium";
1125.                                         font-weight: 900;
1126.                                         font-size: 16px;
1127.                                         text-align: left;
1128.                                         color: #000;
1130.                                 }
1132.                                 .sign {
1133.                                         margin-right: 8px;
1134.                                         width: 3px;
1135.                                         height: 16px;
1136.                                         border-radius: 1.5px;
1137.                                         background: #0b8eff;
1138.                                 }
1139.                         }
1143.                 }
1145.                 .login-title {
1146.                         padding: 10% 18px;
1147.                         line-height: 40px;
1148.                         font-family: "FZZhengHeiS-B-GB";
1149.                         font-weight: 400;
1150.                         font-size: 20px;
1151.                         text-align: left;
1152.                         color: #fff;
1153.                 }
1154.         }
1155. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。