<template>
<view>
<view class="header"><!-- 头部 -->
<view class="title"><!-- 额头 -->
<view class="icon">
<image src="../../static/logo.png" mode=""></image>
<span>智慧养老</span>
</view>
<view>
<uni-icons @click="getLocation()" type="location" size="30" color="#559DF1"></uni-icons>
</view>
</view>
<view class="search"><!-- 搜索框 -->
<u-input style="padding-left: 35px;background-color: #fff;" v-model="search" type="text" border=""
placeholder="搜索养老机构/服务" @click="gotoSearch()" />
<uni-icons class="icon_search" type="search" size="20" color="#559DF1"></uni-icons>
</view>
</view>
<view class="main">
<view class="focus"><!-- focus:重点 -->
<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000"
:duration="1000"><!-- 轮播图 -->
<swiper-item><!-- 三个小播片 -->
<view class="swiper-item">
<view class="left_text">
<h3>养老机构上签约已开通</h3>
<p style="font-size: 9px;color: #999;">提交预约申请 通过即可享受服务</p>
<u-button class="item_btn" type="primary">立即体验</u-button>
</view>
<view class="right_img">
<image style="width: 80px;height: 150px;" src="../../static/c1.png" mode=""></image>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<view class="left_text">
<h3>养老机构上签约已开通</h3>
<p style="font-size: 9px;color: #999;">提交预约申请 通过即可享受服务</p>
<u-button class="item_btn" type="primary">立即体验</u-button>
</view>
<view class="right_img">
<image style="width: 80px;height: 150px;" src="../../static/c2.png" mode=""></image>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<view class="left_text">
<h3>养老机构上签约已开通</h3>
<p style="font-size: 9px;color: #999;">提交预约申请 通过即可享受服务</p>
<u-button class="item_btn" type="primary">立即体验</u-button>
</view>
<view class="right_img">
<image style="width: 80px;height: 150px;" src="../../static/c3.png" mode=""></image>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<view class="left_text">
<h3>养老机构上签约已开通</h3>
<p style="font-size: 9px;color: #999;">提交预约申请 通过即可享受服务</p>
<u-button class="item_btn" type="primary">立即体验</u-button>
</view>
<view class="right_img">
<image style="width: 80px;height: 150px;" src="../../static/c4.png" mode=""></image>
</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="navi"><!-- 三个彩色框 -->
<view class="navi_item">
<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
<span>一键呼救</span>
</view>
<view class="navi_item">
<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
<span>健康监测</span>
</view>
<view class="navi_item">
<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
<span>健康评估</span>
</view>
</view>
<view class="more">
<view class="more_title">
<p style="font-size: 18px;">推荐机构</p>
<a href="javascript:0">查看更多</a>
</view>
<view class="more_navi">
<scroll-view class="scroll_nav" scroll-x="true" scroll-left="120">
<view class="scr_items">
<view class="scr_items_img"></view>
<view class="scr_items_text">
<p>巴拉巴拉养老社区</p>
<p>距离1.11m</p>
</view>
</view>
<view class="scr_items">
<view class="scr_items_img"></view>
<view class="scr_items_text">
<p>巴拉巴拉养老社区</p>
<p>距离1.11m</p>
</view>
</view>
<view class="scr_items">
<view class="scr_items_img"></view>
<view class="scr_items_text">
<p>巴拉巴拉养老社区</p>
<p>距离1.11m</p>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="he_navi">
<view class="more_title">
<p style="font-size: 18px;">健康资讯</p>
<a href="javascript:0">查看更多</a>
</view>
<view class="he_navi_main">
<view class="he_msg">
<view class="he_msg_text">
<p>巴拉巴拉养老院</p>
<p>巴拉巴拉</p>
</view>
<view class="he_msg_img"></view>
</view>
<view class="he_msg">
<view class="he_msg_text">
<p>内容标题示例,内容标题示例,</p>
<p>内容标题示例,内容标题示例,</p>
</view>
<view class="he_msg_img"></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
search: '',
}
},
methods: {
getLocation(){
uni.navigateTo({
url:"/pages/index/address/address"
})
},
gotoSearch(){
uni.navigateTo({
url:"/pages/index/search/search"
})
}
}
}
</script>
<style>
.header {
padding: 20px;
background-color: #fcfcfc;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
}
.title .icon {
display: flex;
justify-content: space-between;
align-items: center;
}
.title image {
width: 35px;
height: 35px;
margin-right: 10px;
}
.search {
margin-top: 20px;
position: relative;
}
.search .icon_search {
position: absolute;
top: 7px;
left: 8px;
}
.main .focus {
padding: 20px;
}
.main .swiper-item {
height: 150px;
background-color: #F2F7FB;
border-radius: 10px;
display: flex;
justify-content: space-between;
}
.main .swiper-item .left_text {
padding: 25px;
}
.main .swiper-item .item_btn {
width: 80px;
height: 30px;
font-size: 12px;
float: left;
top: 20px;
}
.main .navi {
background-color: #fff;
height: 150px;
display: flex;
justify-content: space-between;
padding: 0px 20px 0px 20px;
display: flex;
align-items: center;
margin-top: -30px;
}
.main .navi .navi_item {
width: 95px;
height: 80px;
background-color: #FA746B;
border-radius: 10px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.main .navi .navi_item span {
margin-top: 5px;
}
.main .navi .navi_item:nth-child(2) {
background-color: #FDDB78;
}
.main .navi .navi_item:nth-child(3) {
background-color: #28D094;
}
.more {
margin-top: 10px;
background-color: #fff;
height: 200px;
padding: 20px;
}
.more_title {
height: 30px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.more_title a {
text-decoration: none;
font-size: 11px;
color: #999;
}
.more_title a::after {
content: '';
width: 4px;
height: 4px;
border-top: 3px solid #999;
border-right: 3px solid #999;
transform: rotate(45deg);
display: inline-block;
margin-left: 2px;
margin-bottom: 1px;
}
.more_navi {
margin-top: 10px;
height: 120px;
background-color: #fff;
}
.scroll_nav {
white-space: nowrap;
width: 100%;
height: 100%;
}
.scr_items {
display: inline-block;
width: 70%;
height: 100%;
border: 1px solid #F0F6FF;
border-radius: 15px;
margin-right: 10px;
}
.scr_items_img {
width: 50px;
height: 50px;
background-image: url('../../static/c1.png');
background-size: 100%;
display: inline-block;
}
.scr_items_text {
display: inline-block;
}
.he_navi {
background-color: #fff;
margin-top: 10px;
height: 200px;
padding: 20px;
}
.he_msg {
display: flex;
justify-content: space-between;
margin-top: 5px;
}
.he_msg_img {
width: 50px;
height: 50px;
background-image: url('../../static/c1.png');
background-size: 100%;
}
</style>
<template>
<view class="">
<view class="header">
<view class="title">
<view class="icon">
<image src="../../static/u30.jpg" mode=""></image>
<p>健康资讯</p>
</view>
</view>
</view>
<view class="main">
<view class="he_navi">
<view class="he_navi_main">
<view class="he_msg">
<view class="he_msg_text">
<p>海拉鲁大陆迷失森林</p>
<p>剑之试炼</p>
<span>内容来源 白诘报社 15分钟前</span>
</view>
<view class="he_msg_img"></view>
</view>
<view class="he_msg">
<view class="he_msg_text">
<p>海拉鲁大陆迷失森林</p>
<p>剑之试炼</p>
<span>内容来源 白诘报社 15分钟前</span>
</view>
<view class="he_msg_img"></view>
</view>
<view class="he_msg">
<view class="he_msg_text">
<p>海拉鲁大陆迷失森林</p>
<p>剑之试炼</p>
<span>内容来源 白诘报社 15分钟前</span>
</view>
<view class="he_msg_img"></view>
</view>
</view>
<view class="navi_item" style="margin-top: 30px;">
<view class="item_main" v-for="(item,i) in list" :key="i" @click="gotocon()">
<view class="item_img">
<image :src="item.newsImg" mode=""></image>
</view>
<view class="item_text">
<h3>{{item.newsName}}</h3>
<span>内容来源 白诘报社 15分钟前</span>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
pageNum: 1,
pageSize: 3,
flag: 0
}
},
mounted() {
uni.request({
url: "http://127.0.0.1:5502/system/news/list?pageNum=1&pageSize=3",
success: (res) => {
this.list = res.data.rows
}
})
},
methods: {
gotocon(){
uni.navigateTo({
url:"./healthmsg/healthmsg"
})
}
},
onReachBottom() {
console.log(1)
uni.showLoading({
title: "加载"
});
setTimeout(function() {
uni.hideLoading();
}, 500)
uni.request({
url: "http://127.0.0.1:5502/system/news/list",
data: {
pageNum: this.pageNum,
pageSize: this.pageSize + 1
},
success: (res) => {
console.log(res)
this.list.push(res.data.rows[0])
console.log(this.list)
}
})
}
}
</script>
<style>
.header {
padding: 20px;
background-color: #fcfcfc;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
}
.title .icon {
display: flex;
justify-content: space-between;
align-items: center;
}
.title image {
width: 35px;
height: 35px;
margin-right: 10px;
}
.he_navi {
background-color: #fff;
margin-top: 10px;
height: 250px;
padding: 20px;
}
.he_msg {
display: flex;
justify-content: space-between;
margin-top: 5px;
}
.he_msg_img {
width: 50px;
height: 50px;
background-image: url('../../static/c1.png');
background-size: 100%;
}
span {
font-size: 10px;
color: #B3B3B3;
}
span::after {
content: '×';
float: right;
}
</style>
<template>
<view class="">
<view class="title">
<view class="icon">
<image src="/static/u30.jpg" mode=""></image>
<span>健康监测</span>
</view>
</view>
<view class="content">
<view class="user_msg">
<p>{{username}}的签约机构</p>
<button @click="open">切换</button>
<uni-popup ref="popup" type="bottom" class="user_msg_tc">
<view class="user_msg_ttchuang">
<h4>请选择签约人</h4>
<view @click="qiehuan(i)" v-for="(item,i) in list1">{{item}}</view>
<button @click="quxiao">取消</button>
</view>
</uni-popup>
</view>
</view>
<view class="main">
<view class="focus">
<view class="focus_text">
<p style="font-size: 20px;width: 180px;line-height: 1.5;">哈特诺村塞尔达的家(原林克的家)</p>
<span>哈特诺村旮旯角</span>
</view>
<view class="focus_img"></view>
</view>
<view class="navi">
<view class="navi_item">
<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
<span>一键呼救</span>
</view>
<view class="navi_item">
<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
<span>健康监测</span>
</view>
<view class="navi_item">
<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
<span>健康评估</span>
</view>
<view class="navi_item">
<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
<span>健康评估</span>
</view>
<view class="navi_item">
<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
<span>健康评估</span>
</view>
<view class="navi_item">
<uni-icons type="hand-up" size="40px" color="#fff"></uni-icons>
<span>健康评估</span>
</view>
</view>
<view style="margin-top: 60px;">
<p>室内环境</p>
<view class="room">
<view class="room_item" v-for="(item, i) in list.slice(0,3)" :key="i">
{{item.temperature}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
username: '唔西迪西',
list: [],
list1:['张三','李四','王五']
}
},
methods: {
open(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('top')
},
qiehuan(i){
uni.showModal({
title:"是否更换签约人"+this.list1[i]
})
}
},
mounted(){
uni.request({
url:"http://127.0.0.1:5502/system/environment/listTemperatureMinByRoomId?roomId=1",
success: (res) => {
console.log(res)
this.list = res.data.rows
}
})
}
}
</script>
<style>
/* .header {
padding: 20px;
background-color: #fcfcfc;
} */
.title {
display: flex;
justify-content: space-between;
align-items: center;
}
.title .icon {
display: flex;
justify-content: space-between;
align-items: center;
}
.title image {
width: 35px;
height: 35px;
margin-right: 10px;
}
.main {
padding: 10px;
}
.main .focus,
.room {
padding: 20px;
border-radius: 15px;
height: 160px;
background-color: #fff;
margin-top: 10px;
margin-bottom: 40px;
display: flex;
}
.main .focus .focus_text {
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
}
.main .focus .focus_text span {
position: relative;
width: 125px;
}
.main .focus .focus_text span::after {
content: '';
width: 6px;
height: 6px;
border-top: 2px solid #989898;
border-right: 2px solid #989898;
transform: rotate(45deg);
display: block;
position: absolute;
right: 0;
top: 8px;
}
.main .focus .focus_img {
width: 60px;
height: 60px;
background: url('../../static/c1.png');
background-size: 100%;
}
.main .navi {
height: 150px;
display: flex;
justify-content: space-between;
padding: 0px 20px 0px 20px;
align-items: center;
margin-top: -30px;
flex-wrap: wrap;
}
.main .navi .navi_item {
flex: 0 30%;
height: 80px;
margin-top: 15px;
background-color: #FA746B;
border-radius: 10px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.main .navi .navi_item span {
margin-top: 5px;
}
.main .navi .navi_item:nth-child(2) {
background-color: #FDDB78;
}
.main .navi .navi_item:nth-child(3) {
background-color: #28D094;
}
.user_msg {
display: flex;
width: 100%;
height: 50px;
padding: 30px 0px 10px 10px;
align-items: center;
}
.user_msg .user_msg_tc{
background-color: aliceblue;
color: black;
font-size: 20px;
display: flex;
align-items: center;
}
.user_msg_ttchuang{
display: flex;
flex-direction: column;
justify-content: center;
}
.content p {
font-size: 25px;
letter-spacing: 2px;
}
.content button {
height: 40px;
line-height: 38px;
color: #3686F8;
border: 1px solid #3686F8;
border-radius: 20px;
box-shadow: 0px 0px 0px 1px #A1C9FB;
}
.room {
margin-top: 10px;
display: flex;
justify-content: space-around;
}
.room_item {
height: 100%;
border: 1px solid #A7C5A3;
border-radius: 5px;
flex:0 30%;
}
</style>
<template>
<view class=""><!-- ”我的“ -->
<view class="title"><!-- 头部 -->
<view class="icon">
<image src="../../static/u30.jpg" mode=""></image>
<span>我的</span>
</view>
<image src="../../u32.svg" mode="" class="title_1"></image>
</view>
<view class="main"><!-- 用户名片部分 -->
<view class="focus">
<view class="user_msg">
<view class="user_img">
<image src="../../static/u39.svg" style="width: 70px;height: 70px;" mode=""></image>
</view>
<view class="user">
<view class="user_name">
唔西迪西
</view>
<view class="user_age">
女 30岁
</view>
</view>
</view>
<view class="user_op">
<button type="warn">本人</button>
<button type="default">已签约</button>
</view>
</view>
</view>
<view class="todo"><!-- 下半部分 -->
<view class="li_1" @click="yyjl">
<image src="/static/u48.svg" mode=""></image>
<span>预约记录</span>
<image src="/static/u45.svg" mode=""></image>
</view>
<view class="li_1" @click="jtcy">
<image src="/static/u54.svg" mode=""></image>
<span>家庭成员管理</span>
<image src="/static/u45.svg" mode=""></image>
</view>
<view class="li_1" @click="yyjl">
<image src="/static/u60.svg" mode=""></image>
<span>我的健康档案</span>
<image src="/static/u45.svg" mode=""></image>
</view>
<view class="li_1" @click="yyjl">
<image src="/static/u66.svg" mode=""></image>
<span>我的服务包</span>
<image src="/static/u45.svg" mode=""></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
search: '',
}
},
methods: {
yyjl(){
uni.navigateTo({
url:'/pages/index/my/my'
})
},
jtcy(){
uni.navigateTo({
url:"/pages/index/family/family"
})
}
},
mounted() {
uni.request({
url:"http://127.0.0.1:5502/getInfo",
success: (res) => {
console.log(res)
}
})
}
}
</script>
<style>
.title {
display: flex;
justify-content: space-between;
align-items: center;
}
.title .icon {
display: flex;
justify-content: space-between;
align-items: center;
}
.title image {
width: 35px;
height: 35px;
margin-left: 10px;
}
.title .title_1{
width: 20px;
height: 20px;
margin-right: 10px;
}
.main {
padding: 20px;
}
.focus {
width: 100%;
height: 180px;
border-radius: 13px;
background-color: #2984F8;
color: #fcfcfc;
padding: 10px;
display: flex;
justify-content: space-between;
}
.user_msg {
display: flex;
}
.user{
display: flex;
flex-direction: column;
margin-left: 3px;
}
.user .user_name{
margin-top: 25px;
font-size: 25px;
}
.user .user_age{
margin-top: 5px;
}
.user_op{
display: flex;
}
.user_op :nth-child(1){
flex: 1;
background-color: #FA746B;
}
.user_op button{
height: 20px;
width: 55px;
background-color: #28D094;
font-size: 10px;
color: white;
border-radius: 20px;
}
.todo{
margin-top: 20px;
background-color: #fff;
padding: 10px;
width: 100%;
height: 300px;
}
.todo ul{
padding: 0px;
list-style: none;
}
.todo image{
width: 20px;
height: 20px;
margin: 4px;
}
.todo span{
width: 100%;
position: absolute;
}
.todo span::after{
content: '';
width: 8px;
height: 8px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(45deg);
display: block;
position: absolute;
right: 0;
top: 7px;
}
.li_1{
display: flex;
justify-content: space-between;
margin-bottom: 0%;
width: 100%;
height: 40px;
border-bottom:1px solid #ccc;
position: relative;
}
.li_1 span{
margin-left: 30px;
/* position: absolute; */
top:10px;
}
</style>