Skip to content

L
ln-medicalAppointment-pc
Commit 43819c19 authored by hailiang.sun's avatar hailiang.sun
Browse files
Options

放大设计稿重新调整

parent 256b75ac
Show whitespace changes
Inline Side-by-side
Showing with 269 additions and 236 deletions
src/views/flow/components/combo.vue
View file @ 43819c19
......@@ -97,11 +97,10 @@ export default {
margin-top: 20px;
}
.items {
width: 400px;
width: 700px;
.item {
background: #fafafa;
border-radius: 2px;
width: 400px;
margin-top: 20px;
height: 36px;
line-height: 36px;
......@@ -115,10 +114,9 @@ export default {
::v-deep .ant-checkbox-group-item {
background: #fafafa;
border-radius: 2px;
width: 400px;
width: 700px;
margin-top: 20px;
height: 36px;
line-height: 36px;
line-height: 58px;
font-size: 14px !important;
padding-left: 10px;
}
......
src/views/flow/components/detail.vue
View file @ 43819c19
......@@ -86,7 +86,7 @@ export default {
}
}
.items {
margin-top: 15px;
margin-top: 21px;
padding-left: 10px;
li {
margin-top: 15px;
......@@ -96,12 +96,12 @@ export default {
color: #aaaaaa;
}
.content {
width: 400px;
width: 700px;
color: #333333;
font-size: 14px;
line-height: 40px;
line-height: 58px;
background: #fafafa;
margin-top: 4px;
margin-top: 8px;
border-radius: 2px;
position: relative;
left: -10px;
......
src/views/flow/components/selectInstitution.vue 0 → 100644
View file @ 43819c19
<template>
<div class="institution">
<!-- 请选择体检地区 -->
<div class="area">
<div class="title">
<div class="type"><span class="point"></span> 请选择体检地区</div>
</div>
<ul class="area_box">
<li>
<label>省：</label>
<a-select style="width: 120px">
<a-select-option
v-for="item in provinceList"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
</li>
<li>
<label>市：</label>
<a-select style="width: 120px">
<a-select-option
v-for="item in provinceList"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
</li>
<li>
<label>区：</label>
<a-select style="width: 120px">
<a-select-option
v-for="item in areaList"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
</li>
</ul>
</div>
<!-- 请选择体检机构 -->
<div class="mechanism">
<div class="title">
<div class="type"><span class="point"></span> 请选择体检机构</div>
</div>
<div class="mechanism_box">
<span
v-for="(item, index) in mechanismList"
:key="index"
:class="index === selectIndex ? 'active' : ''"
@click="clickTab(index)"
>{{ item }}</span
>
</div>
</div>
<!-- 请选择体检地区 -->
<div class="hospital">
<div class="title">
<div class="type"><span class="point"></span> 请选择体检中心</div>
</div>
<ul class="hospital_box">
<li v-for="(item, index) in hospitalList" :key="index">
<div>
<p class="top">{{ item.name }}</p>
<p class="bottom">{{ item.address }}</p>
</div>
<button
:class="item.isDisabled ? 'btn disabled' : 'btn'"
@click="openDatePicker(item)"
>
选择体检日期
</button>
</li>
</ul>
</div>
<div class="mask" v-if="datePickShow">
<reserve-date
ref="reserveDate1"
@confirmDate="getConfirm"
@cancleDate="getCancle"
@changeDay="
(date) => {
return dateChange(date, 0);
}
"
/>
</div>
</div>
</template>
<script>
import reserveDate from "../../../components/reserve-date";
export default {
name: "selectInstitution",
components: {
reserveDate,
},
props: {},
data() {
return {
datePickShow: false,
selectIndex: 0,
provinceList: ["上海市"],
provinceList: ["上海市"],
areaList: ["静安区"],
mechanismList: ["全部", "慈铭", "美年"],
hospitalList: [
{
name: "上海张江分院",
address: "上海市浦东新区海科路777号",
},
{
name: "上海张江分院",
address: "上海市浦东新区海科路777号",
},
{
name: "上海张江分院",
address: "上海市浦东新区海科路777号",
},
{
isDisabled: true,
name: "上海张江分院",
address: "上海市浦东新区海科路777号",
},
],
};
},
methods: {
// 选择体检机构
clickTab(index) {
this.selectIndex = index;
},
// 打开日期弹框
openDatePicker(item) {
if (item.isDisabled) {
return;
}
this.datePickShow = true;
},
getConfirm(val) {
this.datePickShow = false;
},
getCancle(val) {
this.datePickShow = false;
},
dateChange(date, type) {
console.log(date);
},
},
};
</script>
<style lang="less" scoped>
.mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.institution {
padding: 19.5px 14.5px 33.5px 14.5px;
background-color: white;
width: 760px;
margin: 0 auto;
font-size: 14px;
color: #333;
.title {
.point {
display: inline-block;
border-radius: 5px;
width: 6px;
height: 6px;
background-color: #3f7ffb;
margin-right: 6px;
position: relative;
top: -1px;
}
.type {
font-size: 14px;
font-weight: bold;
}
.item-container {
margin-top: 8.5px;
}
}
.area_box {
display: flex;
justify-content: space-between;
margin: 25px 0px 45px 0px;
label {
color: #aaa;
}
}
.mechanism_box {
display: flex;
flex-wrap: wrap;
margin: 25px 0px 45px 0px;
align-items: center;
span {
display: inline-block;
height: 42px;
line-height: 42px;
padding: 0 38px;
background: #fafafa;
border-radius: 4px;
margin-right: 20px;
}
span.active {
background: #d2d2d2;
}
}
.hospital_box {
margin: 25px 0px 45px 0px;
li {
display: flex;
height: 98px;
align-items: center;
justify-content: space-between;
background: #fafafa;
padding: 28px 24px;
margin-bottom: 12px;
.top {
font-size: 14px;
color: #333;
}
.bottom {
color: #999;
font-size: 13px;
}
.btn {
outline: none;
border: none;
background: linear-gradient(87deg, #ffcb00, #ffb219);
width: 110px;
height: 40px;
border-radius: 4px;
color: #fff;
}
.btn.disabled {
background: #e2e2e2;
}
}
}
}
</style>
src/views/flow/index.vue
View file @ 43819c19
......@@ -30,9 +30,9 @@
</div>
<div class="right">
<Combos v-if="!next" />
<Detail />
<SelectInstitution v-if="false" />
<Combos />
<Detail v-if="false" />
<SelectInstitution v-if="!next" />
</div>
</div>
<div class="btn">
......@@ -42,7 +42,7 @@
</template>
<script>
import SelectInstitution from "./selectInstitution.vue";
import SelectInstitution from "./components/selectInstitution.vue";
import Combos from "./components/combo.vue";
import Detail from "./components/detail.vue";
......@@ -91,7 +91,6 @@ export default {
display: flex;
justify-content: center;
.left {
max-height: 350px;
.reset {
text-align: center;
margin-top: 25px;
......@@ -101,14 +100,15 @@ export default {
::v-deep .ant-input {
border: none;
background-color: #fafafa;
height: 42px;
}
.item {
display: flex;
margin-top: 10px;
margin-top: 14px;
.label {
display: inline-block;
width: 102px;
line-height: 32px;
width: 120px;
line-height: 42px;
font-size: 14px;
color: #aaaaaa;
padding-left: 12px;
......
src/views/flow/selectInstitution.vue deleted 100644 → 0
View file @ 256b75ac
<template>
<div class="institution">
<!-- 请选择体检地区 -->
<div class="area">
<div class="title">
<div class="type"><span class="point"></span> 请选择体检地区</div>
</div>
<ul class="area_box">
<li>
<label>省：</label>
<a-select style="width:120px">
<a-select-option v-for="(item) in provinceList" :key="item" :value="item">{{item}}</a-select-option>
</a-select>
</li>
<li>
<label>市：</label>
<a-select style="width:120px">
<a-select-option v-for="(item) in provinceList" :key="item" :value="item">{{item}}</a-select-option>
</a-select>
</li>
<li>
<label>区：</label>
<a-select style="width:120px">
<a-select-option v-for="(item) in areaList" :key="item" :value="item">{{item}}</a-select-option>
</a-select>
</li>
</ul>
</div>
<!-- 请选择体检机构 -->
<div class="mechanism">
<div class="title">
<div class="type"><span class="point"></span> 请选择体检机构</div>
</div>
<div class="mechanism_box">
<span v-for="(item, index) in mechanismList" :key="index" :class="index === selectIndex ? 'active' : ''" @click="clickTab(index)">{{item}}</span>
</div>
</div>
<!-- 请选择体检地区 -->
<div class="hospital">
<div class="title">
<div class="type"><span class="point"></span> 请选择体检中心</div>
</div>
<ul class="hospital_box">
<li v-for="(item, index) in hospitalList" :key="index">
<div>
<p class="top">{{item.name}}</p>
<p class="bottom">{{item.address}}</p>
</div>
<button :class="item.isDisabled ? 'btn disabled' : 'btn'" @click="openDatePicker(item)">选择体检日期</button>
</li>
</ul>
</div>
<div class="mask" v-if="datePickShow">
<reserve-date ref="reserveDate1" @confirmDate="getConfirm" @cancleDate="getCancle" @changeDay="(date)=>{ return dateChange(date, 0); }" />
</div>
</div>
</template>
<script>
import reserveDate from '../../components/reserve-date'
export default {
name: "selectInstitution",
components: {
reserveDate
},
props: {},
data() {
return {
datePickShow: false,
selectIndex: 0,
provinceList: ['上海市'],
provinceList: ['上海市'],
areaList: ['静安区'],
mechanismList: ['全部', '慈铭', '美年'],
hospitalList: [
{
name: '上海张江分院',
address: '上海市浦东新区海科路777号'
},
{
name: '上海张江分院',
address: '上海市浦东新区海科路777号'
},
{
name: '上海张江分院',
address: '上海市浦东新区海科路777号'
},
{
isDisabled: true,
name: '上海张江分院',
address: '上海市浦东新区海科路777号'
},
]
};
},
methods: {
// 选择体检机构
clickTab(index) {
this.selectIndex = index;
},
// 打开日期弹框
openDatePicker(item) {
if (item.isDisabled) {
return;
}
this.datePickShow = true;
},
getConfirm(val) {
this.datePickShow = false;
},
getCancle(val) {
this.datePickShow = false;
},
dateChange(date, type) {
console.log(date)
}
},
};
</script>
<style lang="less" scoped>
.mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.institution{
padding: 19.5px 14.5px 33.5px 14.5px;
background-color: white;
width: 760px;
margin: 0 auto;
font-size: 14px;
color: #333;
.title {
.point {
display: inline-block;
border-radius: 5px;
width: 6px;
height: 6px;
background-color: #3f7ffb;
margin-right: 6px;
position: relative;
top: -1px;
}
.type {
font-size: 14px;
font-weight: bold;
}
.item-container {
margin-top: 8.5px;
}
}
.area_box {
display: flex;
justify-content: space-between;
margin: 25px 0px 45px 0px;
label {
color: #aaa;
}
}
.mechanism_box {
display: flex;
flex-wrap: wrap;
margin: 25px 0px 45px 0px;
align-items: center;
span {
display: inline-block;
height: 42px;
line-height: 42px;
padding: 0 38px;
background: #FAFAFA;
border-radius: 4px;
margin-right: 20px;
}
span.active {
background: #D2D2D2;
}
}
.hospital_box {
margin: 25px 0px 45px 0px;
li {
display: flex;
height: 98px;
align-items: center;
justify-content: space-between;
background: #FAFAFA;
padding: 28px 24px;
margin-bottom: 12px;
.top {
font-size: 14px;
color: #333;
}
.bottom {
color: #999;
font-size: 13px;
}
.btn {
outline: none;
border: none;
background: linear-gradient(87deg, #FFCB00, #FFB219);
width: 110px;
height: 40px;
border-radius: 4px;
color: #fff;
}
.btn.disabled {
background: #E2E2E2;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment