382 lines
7.6 KiB
Vue
382 lines
7.6 KiB
Vue
<template>
|
|
<div class="container">
|
|
<view class="select" @click.stop>
|
|
<view class="select-left" @click="isRuler=true" :style="!isRuler?{color:`black`,backgroundColor:`#fff`}:{}">
|
|
列表
|
|
</view>
|
|
<view class="select-right" @click="isRuler=false"
|
|
:style="isRuler?{color:`black`,backgroundColor:`#fff`}:{}">
|
|
地图
|
|
</view>
|
|
</view>
|
|
<!-- <view style="height: 80rpx;background-color: #E0E2E9;"></view> -->
|
|
<view class="title-map" v-show="!isRuler">
|
|
<view class="right-bad">
|
|
<view>北</view>
|
|
<image class="right-bad-img" src="@/static/index/zhinan.png" />
|
|
<view>南</view>
|
|
</view>
|
|
<image class="title-img" src="@/static/index/map.png" />
|
|
</view>
|
|
<view class="list-father">
|
|
<view v-for="(item,index) in institution" :key="index" class="card-father" @click="targetIndex=index">
|
|
<view :class="targetIndex==index ? `card-target` : `card`">
|
|
<image class="card-img" :src="targetIndex==index ?`/static/index/jigou/bluewuzi.png`: `/static/index/jigou/wuzi.png`" />
|
|
<view v-show="targetIndex==index" class="abs-father">
|
|
<image class="abs-img" src="@/static/index/jigou/bar.png" />
|
|
<!-- <view class="abs-dui"></view> -->
|
|
<image class="abs-dui" src="@/static/index/jigou/dui.png" />
|
|
</view>
|
|
</view>
|
|
<view class="card-name">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="under-container-title">
|
|
<view style="margin-left: 60rpx;" :class="isTarget ? 'radio-circle-target' : 'radio-circle'" @click="isTarget = !isTarget"></view>
|
|
<view style="margin-left: 17rpx;" class="radio-circle-font" @click="isTarget = !isTarget">阅读并同意</view>
|
|
<view class="radio-circle-blue" @click="jumpToPro">
|
|
《护理单元使用条款》
|
|
</view>
|
|
</view>
|
|
<view class="button-blue" @click="loginIt">
|
|
一键登录
|
|
</view>
|
|
<view class="bgc-height">
|
|
|
|
</view>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
const isRuler = ref(false);
|
|
const isTarget = ref(false);
|
|
const targetIndex = ref(-1);
|
|
|
|
const institution = ref([{
|
|
name: "护理单元01",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元02",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元03",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元04",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元05",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元06",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元07",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元08",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元09",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元10",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元11",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元12",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
{
|
|
name: "护理单元13",
|
|
width: "30",
|
|
height: "30",
|
|
top: "20",
|
|
left: "0"
|
|
},
|
|
])
|
|
const jumpToPro = () =>{
|
|
uni.navigateTo({
|
|
url: "/pages/login/protocol"
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
background-color: rgb(236,238,244);
|
|
|
|
.select {
|
|
position: absolute;
|
|
left: 30rpx;
|
|
top: 10rpx;
|
|
width: 170rpx;
|
|
height: 60rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #01A8FF;
|
|
z-index: 1;
|
|
display: flex;
|
|
border: 4rpx solid #01A8FF;
|
|
|
|
.select-left {
|
|
border-top-left-radius: 15rpx;
|
|
border-bottom-left-radius: 15rpx;
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 25rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.select-right {
|
|
border-top-right-radius: 15rpx;
|
|
border-bottom-right-radius: 15rpx;
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 25rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.title-map {
|
|
width: 100%;
|
|
height: 650rpx;
|
|
background-color: #E0E2E9;
|
|
// margin-top: 50rpx;
|
|
position: relative;
|
|
|
|
.right-bad {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
right: 20rpx;
|
|
width: 50rpx;
|
|
height: 130rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background-color: #fff;
|
|
z-index: 1;
|
|
border-radius: 20rpx;
|
|
font-size: 23rpx;
|
|
|
|
.right-bad-img {
|
|
width: 30rpx;
|
|
height: 55rpx;
|
|
}
|
|
}
|
|
|
|
.title-img {
|
|
width: 700rpx;
|
|
height: 600rpx;
|
|
margin-left: 25rpx;
|
|
margin-top: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-father {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
padding-top: 20rpx;
|
|
background-color: #fff;
|
|
border-bottom-left-radius: 30rpx;
|
|
border-bottom-right-radius: 30rpx;
|
|
.card-father {
|
|
display: flex;
|
|
width: 45%;
|
|
margin: 0 2.5%;
|
|
flex-direction: column;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.card {
|
|
width: 100%;
|
|
height: 250rpx;
|
|
background-color: #F8F9FD;
|
|
border-radius: 35rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.card-target {
|
|
width: 100%;
|
|
height: 250rpx;
|
|
background-color: #F8F9FD;
|
|
border-radius: 35rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 2rpx solid #0083FF ;
|
|
position: relative;
|
|
// overflow: hidden;
|
|
.abs-father{
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
position: absolute;
|
|
bottom: -4rpx;
|
|
right: -4rpx;
|
|
.abs-img{
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
.abs-dui{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
position: absolute;
|
|
top: 25rpx;
|
|
left: 25rpx;
|
|
// transform: translate(-50%,-50%);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
.card-img {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
}
|
|
.card-name{
|
|
color: #888FA9 ;
|
|
margin: 20rpx 0;
|
|
}
|
|
}
|
|
}
|
|
.under-container-title {
|
|
display: flex;
|
|
margin-top: 40rpx;
|
|
// margin-bottom: 150rpx;
|
|
align-items: center;
|
|
font-size: 25rpx;
|
|
font-weight: 500;
|
|
width: 100%;
|
|
position: relative;
|
|
.radio-circle {
|
|
position: relative;
|
|
margin-top: 2rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #C0C5D9;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.radio-circle-target {
|
|
position: relative;
|
|
margin-top: 2rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #C0C5D9;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.radio-circle-target::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
background-color: #00C9FF;
|
|
border-radius: 50%;
|
|
}
|
|
.radio-circle-blue {
|
|
color: #0083FF;
|
|
margin-top: 3rpx;
|
|
}
|
|
|
|
.radio-circle-font {
|
|
color: #5A607F;
|
|
// margin-left: 18rpx;
|
|
margin-top: 3rpx;
|
|
}
|
|
}
|
|
.button-blue {
|
|
width: 80%;
|
|
margin-left: 10%;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
border-radius: 43rpx;
|
|
background: linear-gradient(to right, #00C9FF, #0076FF);
|
|
color: #fff;
|
|
font-size: 33rpx;
|
|
}
|
|
.bgc-height{
|
|
height: 150rpx;
|
|
width: 100%;
|
|
// background: url(`@/static/index/jigou/bgc.png`);
|
|
background-image: url('/static/index/jigou/bgc.png');
|
|
background-size: 100% auto; /* 宽度占满，高度自动 */
|
|
background-position: top center;
|
|
background-repeat: no-repeat;
|
|
// margin-top: -50rpx;
|
|
}
|
|
</style> |