742 lines
20 KiB
Vue
742 lines
20 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="head">
|
||
<view class="head-title">
|
||
<view style="display: flex;font-size: 28rpx;" @click="toMap" v-if="userCity != null">
|
||
{{userCity}}
|
||
<u-icon name="arrow-down" color="#101010" size="12" style="display: inline;"></u-icon>
|
||
</view>
|
||
|
||
<view class="head-type" style="position:absolute;right:0px;" v-if="$store.state.token">
|
||
<rudon-rowMenuDotDotDot style="color: #000;" :localdata="dropList" @change="dropAction($event)">
|
||
<text class="mall-filter-text">{{ dropName }}</text>
|
||
<u-icon name="arrow-down" color="#101010" size="12"></u-icon>
|
||
</rudon-rowMenuDotDotDot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="head">
|
||
<view class="head-title">
|
||
<view class="title-left">
|
||
<view class="icon"></view>
|
||
<view class="name">设备场所</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<template v-if="locationList.length > 0">
|
||
<view class="one-device" @click="deviceClick(item.id)" v-for="item,index in locationList" :key="index">
|
||
<view class="left">
|
||
<image class="left-img" :src="item.locaitonPic"></image>
|
||
<view class="distance">{{item.distance/1000}}km</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="right-title">{{item.locationName}}</view>
|
||
<view class="right-num">设备数量：{{item.equipmentNums}}</view>
|
||
<view class="right-address">
|
||
{{item.locationState + item.locationCity+item.locationDistrict + item.locationAddress }}
|
||
</view>
|
||
</view>
|
||
<view class="tuijian" v-if="index<3">
|
||
<image src="@/static/images/tuijian.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
|
||
v-if="locationList.length <= 0 && !showModal"></u-empty>
|
||
<view class="device-button" @click="toLogin" v-if="showLogin">
|
||
去登录
|
||
</view>
|
||
</view>
|
||
|
||
<view class="enter-map" @click="toMapMode">
|
||
<text>设备</text>
|
||
<text>地图</text>
|
||
</view>
|
||
<!-- <u-modal :show="showModal" :title="title" :content='content' @confirm="toMap"></u-modal> -->
|
||
<u-modal :show="localShow" @confirm="localModalConfirm" @cancel="localModalCancel" confirmText="前往"
|
||
:showCancelButton="true">
|
||
<view class="slot-content">您已拒绝位置授权，请在小程序我的-隐私权限中自行打开授权</view>
|
||
</u-modal>
|
||
<view :class="['tip',pageOne ? 'one' : 'second']" v-if="!showLogin && showModal">
|
||
<view class="one-tip" v-if="pageOne">
|
||
<view class="tip-img">
|
||
<image src="../../../static/images/bg.png"></image>
|
||
</view>
|
||
<view class="tip-content">
|
||
<view class="one-row">亲爱的用户！你好：</view>
|
||
<!-- <view class="row second-row">我知道你面临着一些困难，而我想让你知道，你并不孤单。虽然你身处孤独症的世界中，但是仍然有爱和支持等待着你，你的家人和朋友会在你身边，给你力量和支持。</view> -->
|
||
<view class="row third-row">
|
||
我们针对孤独症的医疗器械设备将于2025年上市，届时将遍布国内三甲医院及地方康复性医院，如果您将来希望通过设备地图查询治疗设备布设信息，则请填写您所希望接受治疗的地址和位置信息，如不需要获取设备地图服务，则可忽略此地址页面。
|
||
<!-- 我想让你知道的是，自闭症并不是你生命的定义。它可能会让你面临一些挑战，但是也不能阻止你成为一个独特而有价值的人。你有自己的领域和兴趣，你有你的个性和特点，这些都是值得尊重的。自闭症不会改变你的真实内在，它只是让你看世界的方式和方式与众不同而已。 -->
|
||
</view>
|
||
<view class="four-row" @click="chooseAddress">
|
||
<view class="title">地址:</view>
|
||
<u--input v-model="user1.address" placeholder="请选择地址" border="none"
|
||
placeholderStyle="color:#c7c7c7" fontSize="24rpx" readonly suffixIcon="arrow-right"
|
||
suffixIconStyle="color: #c7c7c7" inputAlign="right"></u--input>
|
||
</view>
|
||
<!-- <view class="row four-row">
|
||
作为一名医生，我的建议是为你提供最好的支持和帮助。首先，请尝试找到一个社交小组或社交活动，并与其他孤独症患者交流和学习。这些社交小组通常会有同样的挑战，他们会理解你的感受并支持你。同时，也可以尝试寻找专业治疗，例如行为疗法、言语疗法或认知行为疗法等，这些都可帮助你管理各种挑战和情感难题，以建立积极的情绪状态。
|
||
</view>
|
||
<view class="row five-row">
|
||
此外，请记得寻求家人和朋友的支持。他们可能不理解你所面临的挑战，但是他们肯定会考虑你的感受，并为你提供帮助和支持。不要怀疑自己的价值。你和所有其他人一样，都是有价值、重要和有意义的。
|
||
</view> -->
|
||
<!-- <view class="row sex-row">最后，我希望你能够记住，你并不孤单。有很多人都想帮助和支持你。如果你需要更多的支持和建议，请随时和我联系。我们会站在你身边，给你最好的建议和帮助。</view> -->
|
||
<!-- <view class="seven-row">祝你健康和快乐！</view> -->
|
||
</view>
|
||
<view class="btn-area">
|
||
<view class="tip-button" @click="ignore">
|
||
忽略
|
||
</view>
|
||
<view class="tip-button" style="margin-left: 40rpx;" @click="sure">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="second-tip" v-if="!pageOne">
|
||
<view class="second-img">
|
||
<image src="../../../static/images/bg.png"></image>
|
||
</view>
|
||
<view>
|
||
<view class="second-content">
|
||
<view class="row second-row">现在需要提供给我们，您最希望得到帮助的地点</view>
|
||
<view class="row third-row">
|
||
我们将根据您提供的信息，为您和您身边的人，布置完善的治疗体系，以及社区帮助。</view>
|
||
|
||
</view>
|
||
|
||
<view class="tip-button-second" @click="toMap">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
showModal: false,
|
||
pageOne: true,
|
||
localShow: false, //定位未授权提示弹框
|
||
user: {},
|
||
user1: {},
|
||
userCity: null,
|
||
userCity1: null,
|
||
title: '提示',
|
||
content: '现在需要提供给我们，您最希望得到帮助的地点,我们将根据您提供的信息，为您和您身边的人，布置完善的治疗体系，以及社区帮助',
|
||
dropName: "距离优先",
|
||
dropList: [{
|
||
value: '距离优先',
|
||
text: '距离优先'
|
||
},
|
||
{
|
||
value: '数量优先',
|
||
text: '数量优先'
|
||
}
|
||
],
|
||
locationList: [],
|
||
location: {},
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
loading: '',
|
||
latitude: null,
|
||
longitude: null,
|
||
showLogin: false,
|
||
}
|
||
},
|
||
onShow() {
|
||
// this.pageOne = true;
|
||
// console.log('142',this.$store.getters.token)
|
||
if (this.$store.getters.token) {
|
||
this.showLogin = false
|
||
this.getUserInfo();
|
||
} else {
|
||
this.showLogin = true;
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
if (this.loading == 'moreByLl') {
|
||
this.pageNum++;
|
||
this.locationListByLl();
|
||
}
|
||
if (this.loading == 'moreByNums') {
|
||
this.pageNum++;
|
||
this.locationListByNums();
|
||
}
|
||
},
|
||
methods: {
|
||
ignore() {
|
||
this.showModal = false;
|
||
},
|
||
sure() {
|
||
if(this.user1.longitude&&this.user1.latitude){
|
||
this.showModal = false;
|
||
this.updateUserLocation();
|
||
uni.navigateTo({
|
||
url: '/devicePackage/pages/deviceAdmin'
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
icon:'none',
|
||
title:'地址不能为空'
|
||
})
|
||
}
|
||
},
|
||
toLogin() {
|
||
uni.navigateTo({
|
||
url: '/loginPackage/pages/Login'
|
||
})
|
||
},
|
||
nextPage() {
|
||
this.pageOne = false;
|
||
},
|
||
async getUserInfo() {
|
||
const res = await this.$myRequest({
|
||
url: '/getInfo'
|
||
})
|
||
this.user = res.data.user;
|
||
this.userCity = this.user.city;
|
||
console.log('89', this.user)
|
||
// if ((this.user.longitude == null && this.user.latitude == null) || (this.user.longitude == '' && this.user.latitude == '')) {
|
||
// // this.showModal = true;
|
||
// } else {
|
||
// this.showModal = false;
|
||
// this.getLocationList(this.dropName)
|
||
// }
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: (res) => {
|
||
|
||
this.location = res
|
||
this.locationList = [];
|
||
this.dropName == '距离优先' ? this.locationListByLl() : this
|
||
.locationListByNums()
|
||
},
|
||
fail: (data) => {
|
||
console.log('104', data)
|
||
this.localShow = true;
|
||
}
|
||
});
|
||
},
|
||
toMap() {
|
||
console.log('84')
|
||
this.showModal = false;
|
||
let that = this;
|
||
let params = {};
|
||
if (that.latitude && that.longitude) {
|
||
params = {
|
||
latitude: that.latitude,
|
||
longitude: that.longitude
|
||
}
|
||
}
|
||
console.log('245', params)
|
||
uni.chooseLocation({
|
||
...params,
|
||
success(data) {
|
||
console.log('98', data)
|
||
that.user.address = data.address + data.name;
|
||
that.user.latitude = data.latitude;
|
||
that.user.longitude = data.longitude;
|
||
that.user.state = data.address.split('省')[0] + '省';
|
||
console.log('121', that.state, data.address.split('省')[1])
|
||
|
||
// that.$nextTick(function(){
|
||
that.user.city = data.address.split('省')[1].split('市')[0] + '市';
|
||
that.userCity = that.user.city;
|
||
console.log('122', that.city, data.address.split('省')[1].split('市')[1])
|
||
// })
|
||
that.updateUserLocation();
|
||
that.getLocationList(this.dropName)
|
||
},
|
||
fail(data) {
|
||
console.log('104', data)
|
||
that.localShow = true;
|
||
}
|
||
})
|
||
},
|
||
chooseAddress() {
|
||
uni.chooseLocation({
|
||
latitude: this.location.latitude,
|
||
longitude: this.location.longitude,
|
||
success: (data) => {
|
||
console.log('98', data)
|
||
this.user1.address = data.address + data.name;
|
||
this.user1.latitude = data.latitude;
|
||
this.user1.longitude = data.longitude;
|
||
this.user1.state = data.address.split('省')[0] + '省';
|
||
console.log('121', this.state, data.address.split('省')[1])
|
||
|
||
// this.$nextTick(function(){
|
||
this.user1.city = data.address.split('省')[1].split('市')[0] + '市';
|
||
this.userCity1 = this.user1.city;
|
||
// console.log('122', this.city, data.address.split('省')[1].split('市')[1])
|
||
// })
|
||
// this.updateUserLocation();
|
||
// this.getLocationList(this.dropName)
|
||
},
|
||
fail: (data) => {
|
||
console.log('104', data)
|
||
this.localShow = true;
|
||
}
|
||
})
|
||
},
|
||
//定位未授权提示弹框前往
|
||
localModalConfirm() {
|
||
this.localShow = false;
|
||
uni.switchTab({
|
||
url: '/pages/tabbar/mine/Mine'
|
||
})
|
||
},
|
||
//定位未授权提示弹框关闭
|
||
localModalCancel() {
|
||
this.localShow = false;
|
||
},
|
||
toMapMode() {
|
||
if (this.$store.getters.token) {
|
||
//出弹框
|
||
if (this.user.longitude && this.user.latitude) {
|
||
uni.navigateTo({
|
||
url: '/devicePackage/pages/deviceAdmin'
|
||
})
|
||
} else {
|
||
this.showModal = true;
|
||
this.pageOne = true;
|
||
}
|
||
} else {
|
||
// uni.showToast({
|
||
// icon:'none',
|
||
// title:'请登录后查看'
|
||
// })
|
||
uni.navigateTo({
|
||
url: '/loginPackage/pages/Login'
|
||
})
|
||
}
|
||
},
|
||
async updateUserLocation() {
|
||
const res = await this.$myRequest({
|
||
method: 'PUT',
|
||
url: '/system/user/profile/updateUserLocation',
|
||
data: {
|
||
longitude: this.user1.longitude,
|
||
latitude: this.user1.latitude,
|
||
state: this.user1.state, //省
|
||
city: this.user1.city, // 市
|
||
district: '', //县
|
||
address: this.user1.address
|
||
}
|
||
})
|
||
console.log('97', res)
|
||
},
|
||
async getLocationList(dropName) {
|
||
this.locationList = [];
|
||
dropName == '距离优先' ? this.locationListByLl() : this
|
||
.locationListByNums()
|
||
// uni.authorize({
|
||
// scope: 'scope.userLocation',
|
||
// success: () => {
|
||
// uni.getLocation({
|
||
// type: 'wgs84',
|
||
// success: (res) => {
|
||
// console.log('当前位置的经度：' + res.longitude);
|
||
// console.log('当前位置的纬度：' + res.latitude);
|
||
// this.location = res
|
||
// this.locationList = [];
|
||
// dropName == '距离优先' ? this.locationListByLl() : this
|
||
// .locationListByNums()
|
||
|
||
|
||
// }
|
||
// });
|
||
// }
|
||
// })
|
||
},
|
||
// 查询医疗设备场所列表(距离由近至远)
|
||
async locationListByLl() {
|
||
const res = await this.$myRequest({
|
||
url: '/system/location/locationListByLl/?longitude=' + this.user.longitude +
|
||
'&latitude=' + this.user.latitude,
|
||
data: {
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize
|
||
}
|
||
})
|
||
|
||
// this.locationList = res.data.rows
|
||
// console.log(this.locationList);
|
||
if (res.data.rows.length >= this.pageSize) {
|
||
this.loading = 'moreByLl';
|
||
} else {
|
||
this.loading = 'noMore';
|
||
}
|
||
this.locationList = this.locationList.concat(res.data.rows);
|
||
this.locationList.forEach((item, index) => {
|
||
item.locaitonPic = this.baseUrl + item.locaitonPic
|
||
})
|
||
|
||
},
|
||
// 查询医疗设备场所列表(数量有多至少)
|
||
async locationListByNums() {
|
||
const res = await this.$myRequest({
|
||
url: '/system/location/locationListByNums/?longitude=' + this.user.longitude +
|
||
'&latitude=' + this.user.latitude,
|
||
data: {
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize
|
||
}
|
||
})
|
||
// this.locationList = res.data.rows
|
||
if (res.data.rows.length >= this.pageSize) {
|
||
this.loading = 'moreByNums';
|
||
} else {
|
||
this.loading = 'noMore';
|
||
}
|
||
this.locationList = this.locationList.concat(res.data.rows);
|
||
|
||
},
|
||
dropAction(e) {
|
||
if (e === "") {
|
||
return
|
||
}
|
||
this.dropName = e ? e : '距离优先';
|
||
this.getLocationList(e)
|
||
this.pageNum = 1
|
||
this.loading = ''
|
||
},
|
||
deviceClick(id) {
|
||
uni.navigateTo({
|
||
url: "/devicePackage/pages/DeviceList?equipmentLocationId=" + id
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.content {
|
||
height: 100%;
|
||
width: 100%;
|
||
padding: 20rpx;
|
||
|
||
.head-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
|
||
.mall-filter-text {
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.title-left {
|
||
display: flex;
|
||
|
||
.icon {
|
||
width: 6px;
|
||
height: 38rpx;
|
||
line-height: 22px;
|
||
border-radius: 50px;
|
||
background-color: rgba(40, 124, 206, 1);
|
||
text-align: center;
|
||
margin: 8rpx 10rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.name {
|
||
color: rgba(16, 16, 16, 1);
|
||
font-size: 40rpx;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.head-type {
|
||
color: rgba(16, 16, 16, 1);
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
.one-device {
|
||
padding: 20rpx;
|
||
margin-bottom: 24rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 10rpx;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
text-align: center;
|
||
box-shadow: 0px 2px 8px 1px rgba(228, 228, 228, 100);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
|
||
.left {
|
||
position: relative;
|
||
width: 268rpx;
|
||
height: 182rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 20rpx;
|
||
|
||
.left-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.distance {
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
width: 258rpx;
|
||
height: 24px;
|
||
line-height: 20px;
|
||
border-radius: 0rpx 0rpx 10rpx 10rpx;
|
||
background-color: rgba(16, 16, 16, 0.51);
|
||
color: rgba(16, 16, 16, 1);
|
||
font-size: 14px;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 61%;
|
||
|
||
// margin-left:20rpx;
|
||
.right-title {
|
||
color: rgba(16, 16, 16, 1);
|
||
font-size: 30rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
text-align: left;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.right-num {
|
||
color: rgba(16, 16, 16, 1);
|
||
font-size: 24rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
text-align: left;
|
||
margin-top: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.right-address {
|
||
color: rgba(113, 113, 113, 1);
|
||
font-size: 24rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
text-align: left;
|
||
|
||
}
|
||
}
|
||
|
||
.tuijian {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.enter-map {
|
||
position: fixed;
|
||
right: 10rpx;
|
||
bottom: 100rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
background-color: #287CCE;
|
||
box-shadow: 0rpx 4rpx 20rpx 4rpx rgba(0, 0, 0, .4);
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.tip {
|
||
width: 90%;
|
||
// height: 620rpx;
|
||
height: 700rpx;
|
||
position: fixed;
|
||
top: 200rpx;
|
||
left: 5%;
|
||
background-color: #fff;
|
||
// padding-bottom: 20px;
|
||
|
||
&.one {
|
||
border-radius: 20px;
|
||
box-shadow: 0px 2px 0px #E1E2FF, inset 0px -4px 2px #D1D3FF;
|
||
}
|
||
|
||
.one-tip {
|
||
// position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.tip-img {
|
||
width: 100%;
|
||
// height: 250px;
|
||
height: 300px;
|
||
|
||
// background: #FFFFFF;
|
||
// mix-blend-mode: normal;
|
||
// box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
|
||
image {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.second-img {
|
||
width: 100%;
|
||
margin-top: 32%;
|
||
background: #FFFFFF;
|
||
mix-blend-mode: normal;
|
||
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
|
||
|
||
image {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.tip-content {
|
||
width: 100%;
|
||
color: #333;
|
||
font-size: 14px;
|
||
position: absolute;
|
||
top: 27%;
|
||
background: #fff;
|
||
padding: 0px 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.one-row {
|
||
width: 89%;
|
||
|
||
}
|
||
|
||
.row {
|
||
width: 89%;
|
||
|
||
text-indent: 2em;
|
||
}
|
||
|
||
.four-row {
|
||
width: 89%;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.title {
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
input {
|
||
// width: 70%;
|
||
}
|
||
|
||
.right-img {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.second-content {
|
||
color: #333;
|
||
font-size: 12px;
|
||
position: absolute;
|
||
top: 42%;
|
||
background: #fff;
|
||
width: 89%;
|
||
left: 5%;
|
||
padding: 0px 10px;
|
||
height: 300rpx;
|
||
box-shadow: 0px 2px 0px #E1E2FF, inset 0px -4px 2px #D1D3FF;
|
||
border-radius: 20px;
|
||
|
||
.row {
|
||
text-indent: 2em;
|
||
}
|
||
}
|
||
|
||
.btn-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.tip-button {
|
||
font-size: 28rpx;
|
||
background: linear-gradient(278.96deg, #558FFF 3.23%, #0047FD 98.88%);
|
||
mix-blend-mode: normal;
|
||
box-shadow: inset 0px 4px 10px rgba(255, 255, 255, 0.3);
|
||
border-radius: 22px;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
width: 28%;
|
||
padding: 5px 0px;
|
||
margin: 0 auto;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.tip-button-second {
|
||
font-size: 28rpx;
|
||
background: linear-gradient(278.96deg, #558FFF 3.23%, #0047FD 98.88%);
|
||
mix-blend-mode: normal;
|
||
box-shadow: inset 0px 4px 10px rgba(255, 255, 255, 0.3);
|
||
border-radius: 22px;
|
||
text-align: center;
|
||
|
||
color: #FFFFFF;
|
||
width: 22%;
|
||
padding: 6px 0px;
|
||
position: absolute;
|
||
top: 58%;
|
||
left: 37%;
|
||
}
|
||
|
||
.device-button {
|
||
font-size: 28rpx;
|
||
background: linear-gradient(278.96deg, #558FFF 3.23%, #0047FD 98.88%);
|
||
mix-blend-mode: normal;
|
||
box-shadow: inset 0px 4px 10px rgba(255, 255, 255, 0.3);
|
||
border-radius: 22px;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
width: 40%;
|
||
padding: 10px;
|
||
margin: 40px auto;
|
||
}
|
||
}
|
||
</style> |