Skip to content

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

index base

parent 7371dd23
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 361 deletions
src/assets/imgs/login/logout.png
View replaced file @ 7371dd23 View file @ 6ea19d22
src/assets/imgs/login/logout.png

466 Bytes | W: | H:

src/assets/imgs/login/logout.png

380 Bytes | W: | H:

src/assets/imgs/login/logout.png
src/assets/imgs/login/logout.png
src/assets/imgs/login/logout.png
src/assets/imgs/login/logout.png
  • 2-up
  • Swipe
  • Onion skin
src/views/index/components/item.vue 0 → 100644
View file @ 6ea19d22
<template>
<div class="item">
<div class="left">
<div class="title"><span class="point"></span> {{ item.name }}</div>
<div class="detail" @click="$router.push(item.detailUrl)">
<img :src="eyes" alt="" />点击查看体检套餐详情
</div>
</div>
<div class="right">
<a-button
v-if="item.type == 2"
style="background: #ffcc00; color: white; border: none; width: 86px"
>查看</a-button
>
<a-button
v-else
style="background: #3f7ffb; color: white; border: none; width: 86px"
>立即预约</a-button
>
<div class="date">有效期至：{{ item.date }}</div>
</div>
</div>
</template>
<script>
export default {
name: "item",
components: {},
props: {
item: {
type: Object,
default: () => {},
},
},
data() {
return {
eyes: require("@/assets/imgs/index/eyes.png"),
};
},
methods: {},
};
</script>
<style lang="less" scoped>
.item {
display: flex;
justify-content: space-between;
background: #fafafa;
padding: 14.5px 12px;
border-radius: 8px;
margin-top: 12px;
.right {
text-align: right;
.date {
color: #999999;
font-size: 12px;
margin-top: 12px;
}
}
.left {
.title {
color: #333333;
font-size: 12px;
font-weight: bold;
}
.detail {
font-size: 12px;
color: #999999;
line-height: 30px;
margin-top: 12px;
cursor: pointer;
img {
position: relative;
top: -2px;
margin-right: 3px;
}
}
}
}
</style>
src/views/index/index.vue
View file @ 6ea19d22
<template> <template>
<div class="index">首页</div> <div class="index">
<div class="appointment">
<div class="type"><span class="point"></span> 待预约的服务</div>
<div class="item-container">
<Item v-for="(item, index) in items" :item="item" :key="index" />
</div>
</div>
<div class="appointmented">
<div class="type"><span class="point"></span>已预约的服务</div>
<div class="item-container">
<Item v-for="(item, index) in itemb" :item="item" :key="index" />
</div>
</div>
</div>
</template> </template>
<script> <script>
import Item from "./components/item.vue";
export default { export default {
components: {}, components: { Item },
data() { data() {
return {}; return {
items: [
{
name: "体检套餐名称-某某单位-某某套餐",
detailUrl: "http://baidu.com",
type: 1,
date: "2021-11-18",
},
{
name: "体检套餐名称-某某单位-某某套餐",
detailUrl: "http://baidu.com",
type: 1,
date: "2021-11-18",
},
{
name: "体检套餐名称-某某单位-某某套餐",
detailUrl: "http://baidu.com",
type: 1,
date: "2021-11-18",
},
{
name: "体检套餐名称-某某单位-某某套餐",
detailUrl: "http://baidu.com",
type: 1,
date: "2021-11-18",
},
],
itemb: [
{
name: "体检套餐名称-某某单位-某某套餐",
detailUrl: "http://baidu.com",
type: 2,
date: "2021-11-18",
},
{
name: "体检套餐名称-某某单位-某某套餐",
detailUrl: "http://baidu.com",
type: 2,
date: "2021-11-18",
},
{
name: "体检套餐名称-某某单位-某某套餐",
detailUrl: "http://baidu.com",
type: 2,
date: "2021-11-18",
},
{
name: "体检套餐名称-某某单位-某某套餐",
detailUrl: "http://baidu.com",
type: 2,
date: "2021-11-18",
},
],
};
}, },
}; };
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.index {
padding-bottom: 48px;
padding-top: 20px;
background-color: #fafafa;
.appointment,
.appointmented {
padding: 19.5px 14.5px 33.5px 14.5px;
background-color: white;
width: 900px;
margin: 0 auto;
.point {
display: inline-block;
border-radius: 5px;
width: 6px;
height: 6px;
background-color: #3f7ffb;
margin-right: 6px;
position: relative;
top: -1px;
}
border-radius: 8px;
.type {
font-size: 14px;
font-weight: bold;
}
.item-container {
margin-top: 8.5px;
}
}
.appointmented {
margin-top: 20px;
.point {
background-color: #ffcc00;
}
}
}
</style>
src/views/layout/header.vue
View file @ 6ea19d22
...@@ -2,126 +2,11 @@ ...@@ -2,126 +2,11 @@
<div class="header"> <div class="header">
<div class="logo"> <div class="logo">
<img :src="logoImg" alt="" /> <img :src="logoImg" alt="" />
<span>健康服务预约平台</span>
</div> </div>
<div class="menu-container"> <div class="logout">
<div class="cursor" ref="cursor"></div> <img :src="logout" alt="" />
<div class="cursor" ref="cursor-current"></div> <span>退出</span>
<ul class="menu">
<li
@click.self="topage(0, '/')"
@mouseenter.self="hover(0)"
@mouseleave="leave(0)"
>
首页
</li>
<li @mouseenter.self="hover(1)" @mouseleave="leave(1)">
产品家族
<div class="childs">
<div
class="prod"
@click.self="topage(1, '/thirdService/healthPlan')"
>
企业健康管理方案
</div>
<div
class="prod"
@click.self="topage(1, '/thirdService/healthPlan')"
>
企业定制方案
</div>
<div class="prod" @click.self="topage(1, '/products/personal')">
个人健康管理方案
</div>
<div class="prod" @click.self="topage(1, '/productDetails')">
新燕保
</div>
<div class="prod" @click.self="topage(1, '/productDetails2')">
喜燕保
</div>
<div class="prod" @click.self="topage(1, '/productDetails3')">
福燕保
</div>
<div class="prod" @click.self="topage(1, '/productDetails5')">
小燕保
</div>
<div class="prod" @click.self="topage(1, '/productDetails4')">
臻荣耀
</div>
</div>
</li>
<li @mouseenter.self="hover(2)" @mouseleave="leave(2)">
第三方管理服务
<div class="childs">
<div
class="prod"
@click.self="topage(2, '/thirdService/thirdPartService')"
>
第三方服务管理
</div>
<div class="prod" @click.self="topage(2, '/vipService')">
会员服务
</div>
<div class="prod" @click.self="topage(2, '/specialService')">
特色服务
</div>
</div>
</li>
<li
@click.self="topage(3, '/medicalNetwork')"
@mouseenter.self="hover(3)"
@mouseleave="leave(3)"
>
医疗网络
</li>
<li @mouseenter.self="hover(4)" @mouseleave="leave(4)">
医疗服务
<div class="childs">
<div class="prod" @click.self="topage(4, '/medicalService/yx')">
中间带·医杏
</div>
<div
class="prod"
@click.self="topage(4, '/medicalService/company')"
>
企业健保服务
</div>
</div>
</li>
<li
@click.self="topage(5, '/about')"
@mouseenter.self="hover(5)"
@mouseleave="leave(5)"
>
关于我们
</li>
<li></li>
<li @mouseenter.self="hover(7)" @mouseleave="leave(7)">
中文 <img class="down" :src="downIcon" alt="" />
<div class="childs">
<div class="prod" @click="changeLangEvent">中文 CN</div>
<div class="prod" @click="changeLangEvent">英文 EN</div>
</div>
</li>
<li @mouseenter.self="hover(8)" @mouseleave="leave(8)">
登陆 <img class="down" :src="downIcon" alt="" />
<div class="childs">
<a
href="https://provider.medilink-global.com.cn/pcadmin/loginPage"
target="_blank"
><div class="prod" @>会员登录</div></a
>
<a href="http://eccs.run4wd.com/login" target="_blank">
<div class="prod">医疗结构登陆</div></a
>
<a
href="https://secure.medilink-global.com.cn/eccs/"
target="_blank"
>
<div class="prod">合作伙伴登陆</div></a
>
</div>
</li>
</ul>
</div> </div>
</div> </div>
</template> </template>
...@@ -132,256 +17,40 @@ export default { ...@@ -132,256 +17,40 @@ export default {
components: {}, components: {},
data() { data() {
return { return {
logoImg: require("@/assets/imgs/layout/logo.png"), logoImg: require("@/assets/imgs/login/logo.png"),
downIcon: require("@/assets/imgs/layout/down.png"), logout: require("@/assets/imgs/login/logout.png"),
currentIndex: 0,
}; };
}, },
methods: { methods: {},
changeLangEvent() {
if (this.$i18n.locale === "zh-CN") {
this.$i18n.locale = "en-US"; //关键语句
console.log("en-US");
} else {
this.$i18n.locale = "zh-CN"; //关键语句
console.log("zh-CN");
}
},
topage(index, url) {
let cursor = this.$refs["cursor"];
this.currentIndex = index;
switch (index) {
case 0:
cursor.style.left = "0";
break;
case 1:
cursor.style.left = "124px";
break;
case 2:
cursor.style.left = "284px";
break;
case 3:
cursor.style.left = "448px";
break;
case 4:
cursor.style.left = "586px";
break;
case 5:
cursor.style.left = "728px";
break;
}
// 跳页面
this.$router.push(url);
},
leave() {
let cursor = this.$refs["cursor"];
let cursorCurrent = this.$refs["cursor-current"];
let childs = this.$el.querySelectorAll(".childs");
childs.forEach((item) => {
item.style.display = "none";
});
switch (this.currentIndex) {
case 0:
cursor.style.left = "0";
cursorCurrent.style.left = "0";
break;
case 1:
cursor.style.left = "124px";
cursorCurrent.style.left = "124px";
break;
case 2:
cursor.style.left = "284px";
cursorCurrent.style.left = "284px";
break;
case 3:
cursor.style.left = "448px";
cursorCurrent.style.left = "448px";
break;
case 4:
cursor.style.left = "586px";
cursorCurrent.style.left = "586px";
break;
case 5:
cursor.style.left = "728px";
cursorCurrent.style.left = "728px";
break;
}
},
hover(index) {
let childs = this.$el.querySelectorAll(".childs");
// 游标
let cursor = this.$refs["cursor"];
let cursorCurrent = this.$refs["cursor-current"];
cursor.style.display = "show";
cursorCurrent.style.display = "show";
switch (index) {
case 0:
cursorCurrent.style.left = "0";
break;
case 1:
cursorCurrent.style.left = "124px";
childs[0].style.display = "block";
break;
case 2:
cursorCurrent.style.left = "284px";
childs[1].style.display = "block";
break;
case 3:
cursorCurrent.style.left = "448px";
break;
case 4:
cursorCurrent.style.left = "586px";
childs[2].style.display = "block";
break;
case 5:
cursorCurrent.style.left = "728px";
break;
case 7:
childs[3].style.display = "block";
break;
case 8:
childs[4].style.display = "block";
break;
}
},
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: #2c2c31; background: #2c2c31;
.logo { .logout {
padding: 17px 47px; padding: 2.5px 24.5px;
} color: white;
.menu-container { cursor: pointer;
position: relative; line-height: 30px;
.cursor { span {
width: 29px; margin-left: 3px;
height: 3px; position: relative;
background: white; top: 1px;
position: absolute;
bottom: 0;
} }
.menu { }
display: flex; .logo {
justify-content: space-evenly; padding: 2.5px 21.5px;
span {
color: white; color: white;
line-height: 63px; line-height: 30px;
margin: 0; margin-left: 8px;
li { }
.down { img {
width: 6px; height: 25px;
height: 5px;
margin-left: 8px;
position: relative;
top: -2px;
}
position: relative;
cursor: pointer;
margin-right: 84px;
font-size: 14px;
.childs {
display: none;
background: white;
position: absolute;
border-radius: 0px 0px 14px 14px;
padding: 20px 28px;
color: #666666;
font-size: 14px;
top: 63px;
left: -34px;
z-index: 9;
color: #666666;
.prod {
margin: 0;
width: 52px;
line-height: 28px;
text-align: center;
&:hover {
color: #000000;
}
}
}
:nth-child(6) {
margin-right: 67px;
}
&:nth-child(2) {
.childs {
left: -58px;
.prod {
width: 121px;
&:nth-child(1),
&:nth-child(3) {
font-weight: bold;
}
}
}
}
&:nth-child(3) {
.childs {
left: -39px;
.prod {
width: 121px;
}
}
}
&:nth-child(5) {
.childs {
left: -58px;
.prod {
width: 121px;
}
}
}
&:nth-child(8) {
.childs {
left: -30px;
.prod {
width: 52px;
}
}
}
&:nth-child(9) {
a {
color: #666666;
}
.childs {
left: -26px;
padding: 20px 8px;
.prod {
width: 88px;
}
}
}
&:nth-child(7) {
width: 1px;
background: white;
height: 19px;
position: relative;
top: 25px;
margin-right: 34px;
margin-right: 67px;
}
&:nth-child(8) {
margin-right: 34px;
}
&:nth-child(9) {
margin-right: 49px;
}
}
} }
} }
} }
......
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