Merge branch 'main' of git.zdool.com:xs/yxdt/h5
This commit is contained in:
commit
3c0c429006
|
|
@ -6,6 +6,8 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
</head>
|
</head>
|
||||||
|
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=4e6d9067f64ad8101ca0f4ceb7cb4083"></script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
|
"vant": "^4.8.0",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@ let clickNum = (num,path) => {
|
||||||
left: 0px;
|
left: 0px;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
border: 1px solid red;
|
border: 1px solid red;
|
||||||
|
padding: 9px 0px;
|
||||||
.bt_itm {
|
.bt_itm {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 415 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
Binary file not shown.
|
After Width: | Height: | Size: 929 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 775 B |
Binary file not shown.
|
After Width: | Height: | Size: 754 B |
|
|
@ -7,9 +7,11 @@
|
||||||
|
|
||||||
font-weight: normal; */
|
font-weight: normal; */
|
||||||
/* background-color: ; */
|
/* background-color: ; */
|
||||||
|
/* background-color: #F5F5FB; */
|
||||||
|
}
|
||||||
|
body{
|
||||||
background-color: #F5F5FB;
|
background-color: #F5F5FB;
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
a,
|
||||||
.green {
|
.green {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
||||||
|
|
@ -11,4 +11,10 @@ const app = createApp(App)
|
||||||
app.use(createPinia())
|
app.use(createPinia())
|
||||||
app.use(router)
|
app.use(router)
|
||||||
|
|
||||||
|
import vant from 'vant';
|
||||||
|
import 'vant/lib/index.css';
|
||||||
|
app.use(vant)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,14 @@ const router = createRouter({
|
||||||
// which is lazy-loaded when the route is visited.
|
// which is lazy-loaded when the route is visited.
|
||||||
component: () => import('../views/test.vue')
|
component: () => import('../views/test.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/test1',
|
||||||
|
name: 'test1',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (About.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () => import('../views/test1.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/znyt',
|
path: '/znyt',
|
||||||
name: 'znyt',
|
name: 'znyt',
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,220 @@
|
||||||
<script setup>
|
|
||||||
import TheWelcome from '../components/TheWelcome.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<div class="home_body" id="home">
|
||||||
<TheWelcome />
|
<div class="yxfw" @click="list.show = !list.show">
|
||||||
</main>
|
<img class="yxfwtp" :src="list.show == true ? img16 : img15" alt="" />
|
||||||
|
<div :class="list.show == true ? 'yxfwwz' : 'yxfwwzs'">优享服务</div>
|
||||||
|
</div>
|
||||||
|
<div class="yxfwnr" v-show="list.show == true">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in list.yxfw"
|
||||||
|
:key="index"
|
||||||
|
@click="yxfwxz(item)"
|
||||||
|
>
|
||||||
|
<div class="yxfws">
|
||||||
|
<img
|
||||||
|
class="yxfwtp"
|
||||||
|
:src="item.id == list.index ? item.imgs : item.img"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div :class="item.id == list.index ? 'yxfwwz' : 'yxfwwzs'">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<div class="fgx"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="mapDiv"></div>
|
||||||
|
<van-popup
|
||||||
|
:show="true"
|
||||||
|
:overlay="false"
|
||||||
|
round
|
||||||
|
position="bottom"
|
||||||
|
:style="{ height: '30%' }"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, ref, reactive } from "vue";
|
||||||
|
import img1 from "@/assets/home/yysy.png";
|
||||||
|
import img2 from "@/assets/home/yysyxz.png";
|
||||||
|
import img3 from "@/assets/home/xyyj.png";
|
||||||
|
import img4 from "@/assets/home/xyyjxz.png";
|
||||||
|
import img5 from "@/assets/home/lysd.png";
|
||||||
|
import img6 from "@/assets/home/lysdxz.png";
|
||||||
|
import img7 from "@/assets/home/byly.png";
|
||||||
|
import img8 from "@/assets/home/bylyxz.png";
|
||||||
|
import img9 from "@/assets/home/lysd.png";
|
||||||
|
import img10 from "@/assets/home/lysdxz.png";
|
||||||
|
import img11 from "@/assets/home/zyyj.png";
|
||||||
|
import img12 from "@/assets/home/zyyjxz.png";
|
||||||
|
import img13 from "@/assets/home/ryzf.png";
|
||||||
|
import img14 from "@/assets/home/ryzfxz.png";
|
||||||
|
import img15 from "@/assets/home/yxfw.png";
|
||||||
|
import img16 from "@/assets/home/yxfwxz.png";
|
||||||
|
import img17 from "@/assets/home/yy.png";
|
||||||
|
var map = null;
|
||||||
|
var control = null;
|
||||||
|
const list = reactive({
|
||||||
|
show: true,
|
||||||
|
index: 0,
|
||||||
|
yxfw: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
name: "幼有善育",
|
||||||
|
img: img1,
|
||||||
|
imgs: img2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "学有优教",
|
||||||
|
img: img3,
|
||||||
|
imgs: img4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "劳有所得",
|
||||||
|
img: img5,
|
||||||
|
imgs: img6,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "病有良医",
|
||||||
|
img: img7,
|
||||||
|
imgs: img8,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "老有康养",
|
||||||
|
img: img9,
|
||||||
|
imgs: img10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "住有宜居",
|
||||||
|
img: img11,
|
||||||
|
imgs: img12,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: "弱有众扶",
|
||||||
|
img: img13,
|
||||||
|
imgs: img14,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const init = () => {
|
||||||
|
var T = window.T;
|
||||||
|
map = new T.Map("mapDiv");
|
||||||
|
// map.setMapType(window.TMAP_SATELLITE_MAP);
|
||||||
|
map.centerAndZoom(new T.LngLat(121.91686, 29.42154), 12);
|
||||||
|
control = new T.Control.Zoom();
|
||||||
|
//添加缩放平移控件
|
||||||
|
map.addControl(control);
|
||||||
|
control.setPosition(T_ANCHOR_TOP_RIGHT);
|
||||||
|
var icon = new T.Icon({
|
||||||
|
iconUrl: img17,
|
||||||
|
iconSize: new T.Point(28, 28),
|
||||||
|
iconAnchor: new T.Point(28, 28),
|
||||||
|
});
|
||||||
|
//向地图上添加自定义标注
|
||||||
|
var marker = new T.Marker(new T.LngLat(121.94773, 29.47982), { icon: icon });
|
||||||
|
var markers = new T.Marker(new T.LngLat(121.89074, 29.40876), { icon: icon });
|
||||||
|
map.addOverLay(marker);
|
||||||
|
map.addOverLay(markers);
|
||||||
|
};
|
||||||
|
|
||||||
|
const yxfwxz = (e) => {
|
||||||
|
list.index = e.id;
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
init();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style scoped lang='scss'>
|
||||||
|
.home_body {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#mapDiv {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.yxfw {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 6px 6px 6px 6px;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
.yxfwtp {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin: 6px auto 0;
|
||||||
|
}
|
||||||
|
.yxfwwz {
|
||||||
|
font-size: 8px;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #4379ff;
|
||||||
|
line-height: 5px;
|
||||||
|
}
|
||||||
|
.yxfwwzs {
|
||||||
|
font-size: 8px;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.yxfwnr {
|
||||||
|
margin-top: 72px;
|
||||||
|
margin-left: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 6px 6px 6px 6px;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
.fgx {
|
||||||
|
width: 50%;
|
||||||
|
height: 5px;
|
||||||
|
border-bottom: 1px solid #f1f1f1;
|
||||||
|
margin: 0 auto 5px;
|
||||||
|
}
|
||||||
|
.yxfws {
|
||||||
|
z-index: 2;
|
||||||
|
width: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 6px 6px 6px 6px;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.yxfwtp {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin: 6px auto 0;
|
||||||
|
}
|
||||||
|
.yxfwwz {
|
||||||
|
font-size: 8px;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #4379ff;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
.yxfwwzs {
|
||||||
|
font-size: 8px;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,57 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="c_body">
|
<div class="c_body">
|
||||||
<div class="message-container">
|
<!-- <div class="message-container">
|
||||||
<div class="Left_mesg"> <h4>嘿，你好呀</h4> <h4>我是你的智能生活助手~</h4> 您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟
|
<div class="Left">
|
||||||
|
<div class="Left_mesg">
|
||||||
|
<h4>嘿，你好呀</h4>
|
||||||
|
<h4>我是你的智能生活助手~</h4> 您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="Right_mesg">
|
<div class="Left">
|
||||||
骨折去哪家医院
|
<div class="card">
|
||||||
|
<div class="main_card">
|
||||||
|
<div class="card_top">
|
||||||
|
<img src="../assets/5.png" alt="">
|
||||||
|
<div class="desc">
|
||||||
|
<div class="name">象山县中医医院（新院区）</div>
|
||||||
|
<div class="addr">宁波市象山县南部新城新洋路...</div>
|
||||||
|
<div class="tag_wrp">
|
||||||
|
<div class="tag">医保定点</div>
|
||||||
|
<div style="width: 4px;"></div>
|
||||||
|
<div class="tag">医保定点</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card_botm">
|
||||||
|
<div class="card_bt">换一家医院</div>
|
||||||
|
<div class="split_line"></div>
|
||||||
|
<div class="card_bt">帮我预约该医院</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="prise_wrp">
|
||||||
|
<div class="prise">
|
||||||
|
<img src="../assets/1.png" alt="">
|
||||||
|
<div class="spl_line"></div>
|
||||||
|
<img src="../assets/2.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div>
|
<div class="Right">
|
||||||
|
<div class="Right_mesg">
|
||||||
<div class="card">
|
骨折去哪家医院
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Right">
|
||||||
|
<div class="Right_mesg">
|
||||||
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
||||||
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
||||||
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
||||||
|
基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
<div class="main_card">
|
<div class="main_card">
|
||||||
<div class="card_top">
|
<div class="card_top">
|
||||||
<img src="../assets/5.png" alt="">
|
<img src="../assets/5.png" alt="">
|
||||||
|
|
@ -37,64 +80,154 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="message-container">
|
||||||
|
<div class="message" v-for="(message, index) in messages" :key="message.id">
|
||||||
|
<div class="Left" v-if="!message.isMe">
|
||||||
|
<div class="Left_mesg">
|
||||||
|
<div v-if="message.type == 'txt'" class="txt txt_l"> {{ message.text }}</div>
|
||||||
|
<div v-else-if="message.type == 'card'" class="card">
|
||||||
|
<div class="main_card">
|
||||||
|
<div class="card_top">
|
||||||
|
<img src="../assets/5.png" alt="">
|
||||||
|
<div class="desc">
|
||||||
|
<div class="name">象山县中医医院（新院区）</div>
|
||||||
|
<div class="addr">宁波市象山县南部新城新洋路...</div>
|
||||||
|
<div class="tag_wrp">
|
||||||
|
<div class="tag">医保定点</div>
|
||||||
|
<div style="width: 4px;"></div>
|
||||||
|
<div class="tag">医保定点</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card_botm">
|
||||||
|
<div class="card_bt">换一家医院</div>
|
||||||
|
<div class="split_line"></div>
|
||||||
|
<div class="card_bt">帮我预约该医院</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="prise_wrp">
|
||||||
|
<div class="prise">
|
||||||
|
<img src="../assets/1.png" alt="">
|
||||||
|
<div class="spl_line"></div>
|
||||||
|
<img src="../assets/2.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Right" v-else>
|
||||||
|
<div class="Right_mesg">
|
||||||
|
<div v-if="message.type == 'txt'" class="txt txt_r"> {{ message.text }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div v-for="(message, index) in messages" :key="message.id" class="message">
|
||||||
|
<div v-if="message.isMe">{{ message.text }}</div>
|
||||||
|
<div v-else>{{ message.text }}</div>
|
||||||
|
</div> -->
|
||||||
<div class="recomand">
|
<div class="recomand">
|
||||||
<div class="recomand_itm">公积金查询</div>
|
<div class="recomand_itm">公积金查询</div>
|
||||||
<div class="recomand_itm">2024放假安排</div>
|
<div class="recomand_itm">2024放假安排</div>
|
||||||
<div class="recomand_itm">附近推荐的锻炼场所</div>
|
<div class="recomand_itm">附近推荐的锻炼场所</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="c_bottom">
|
<div class="c_bottom">
|
||||||
<img src="../assets/3.png">
|
<img src="../assets/3.png">
|
||||||
<div class="w_input">
|
<input v-model="inputText" type="text" placeholder="有问题尽管问我~" class="sendinput" />
|
||||||
<div style="position: absolute;display: flex; align-items: center;">
|
<div class="w_icon">
|
||||||
<!-- <div style="width: 16px;height: 16px;"> <img src="../assets/4.png" style="width: 16px;height: 16px;" alt=""></div>
|
<img src="../assets/4.png" alt="">
|
||||||
|
|
||||||
<div style="color: #999999;
|
|
||||||
line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- <input type="text" name="" id=""> -->
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="send">发送</div>
|
<div class="send" @click="sendMessage" @keyup.enter="sendMessage">发送</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
let inputText = ref('')
|
||||||
|
let messages = reactive([
|
||||||
|
{ id: 1, type: 'txt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false },
|
||||||
|
{ id: 2, type: 'txt', text: 'Hi', isMe: true },
|
||||||
|
{ id: 3, type: 'card', text: 'Hi', isMe: true },
|
||||||
|
]);
|
||||||
|
let sendMessage = () => {
|
||||||
|
console.log("dddd", inputText.value)
|
||||||
|
/* setTimeout(() => {
|
||||||
|
console.log("inputText.value:", inputText.value);
|
||||||
|
}, 0); */
|
||||||
|
|
||||||
|
if (inputText.value.trim()) {
|
||||||
|
console.log("sendMessage",inputText.value.trim())
|
||||||
|
messages.push({ id: Date.now(), text: inputText.value, isMe: true, type: 'txt' });
|
||||||
|
console.log("messages",messages)
|
||||||
|
scollToButtom();
|
||||||
|
inputText.value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let scollToButtom = () => {
|
||||||
|
/* $nextTick(() => {
|
||||||
|
let chatform= document.getElementById('chatform') // 获取对象
|
||||||
|
chatform.scrollTop = chatform.scrollHeight // 滚动高度
|
||||||
|
}) */
|
||||||
|
}
|
||||||
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.Left_mesg {
|
::-webkit-input-placeholder {
|
||||||
min-height: 44px;
|
color: #999999;
|
||||||
background: #fff;
|
|
||||||
border-radius: 0px 28px 28px 28px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: PingFang SC, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #333333;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
display: inline-block;
|
|
||||||
// float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Right_mesg {
|
.sendinput {
|
||||||
min-height: 44px;
|
height: 36px;
|
||||||
background: #4F82FF;
|
width: calc(100vw - 154px);
|
||||||
border-radius: 28px 0px 28px 28px;
|
border-radius: 21px;
|
||||||
padding: 10px 16px;
|
border: 0px;
|
||||||
font-size: 14px;
|
background: #F5F5FB;
|
||||||
font-family: PingFang SC, PingFang SC;
|
padding: 0px 12px;
|
||||||
font-weight: 400;
|
padding-left: 36px;
|
||||||
color: #FFFFFF;
|
position: absolute;
|
||||||
box-sizing: border-box;
|
left: 60px;
|
||||||
margin-bottom: 16px;
|
z-index: 1;
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sendinput:focus {
|
||||||
|
outline: 1px solid #4379FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Left {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 59px;
|
||||||
|
|
||||||
|
.Left_mesg {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Right {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-right: 16px;
|
||||||
|
padding-left: 59px;
|
||||||
|
|
||||||
|
.Right_mesg {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.recomand {
|
.recomand {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding-left: 16px;
|
||||||
|
width: 100vw;
|
||||||
|
position: fixed;
|
||||||
|
top: calc(100vh - 156px);
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
.recomand_itm {
|
.recomand_itm {
|
||||||
|
|
@ -119,6 +252,9 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
|
||||||
.card {
|
.card {
|
||||||
width: 343px;
|
width: 343px;
|
||||||
height: 216px;
|
height: 216px;
|
||||||
|
// margin: 0 auto;
|
||||||
|
// padding-left: 16px;
|
||||||
|
// margin-left: 16px;
|
||||||
|
|
||||||
.main_card {
|
.main_card {
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
|
@ -236,6 +372,28 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.txt {
|
||||||
|
min-height: 44px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.txt_l {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0px 12px 12px 12px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.txt_r {
|
||||||
|
border-radius: 12px 12px 0px 12px;
|
||||||
|
background: #4F82FF;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/* @media (min-width: 1024px) {
|
/* @media (min-width: 1024px) {
|
||||||
.about {
|
.about {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
@ -244,16 +402,19 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
|
||||||
}
|
}
|
||||||
} */
|
} */
|
||||||
.c_body {
|
.c_body {
|
||||||
// position: relative;
|
|
||||||
// background-color: rgb(245, 245, 251);
|
|
||||||
// width: 100vw;
|
|
||||||
// min-height: 100vh;
|
|
||||||
|
|
||||||
.message-container {
|
.message-container {
|
||||||
height: 83vh;
|
height: calc(100vh - 124px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border: 1px red solid;
|
border: 1px red solid;
|
||||||
background-color: rgb(245, 245, 251);
|
background-color: rgb(245, 245, 251);
|
||||||
|
position: relative;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 45px;
|
||||||
|
|
||||||
|
.message {
|
||||||
|
/* width: 100%;
|
||||||
|
height: 100%; */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.c_bottom {
|
.c_bottom {
|
||||||
|
|
@ -263,11 +424,14 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid red;
|
border: 1px solid red;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 180px;
|
// bottom: 180px;
|
||||||
|
top: calc(100vh - 122px);
|
||||||
left: 0px;
|
left: 0px;
|
||||||
|
|
||||||
// display: flex;
|
display: flex;
|
||||||
// align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
// justify-content: center;
|
||||||
// padding: 12px 16px;
|
// padding: 12px 16px;
|
||||||
img {
|
img {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
|
|
@ -277,17 +441,62 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
|
||||||
left: 16px;
|
left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w_input {
|
.tips {
|
||||||
margin-left: 8px;
|
/* display: flex;
|
||||||
margin-right: 8px;
|
align-items: center;
|
||||||
background-color: #F5F5FB;
|
justify-content: flex-start; */
|
||||||
border-radius: 36px;
|
border: 1px solid red;
|
||||||
position: relative;
|
// width: calc(100vw - 154px);
|
||||||
width: calc(100vw - 81px - 84px);
|
width: 16px;
|
||||||
height: 36px;
|
height: 16px;
|
||||||
border: 1px solid blueviolet;
|
// height: 36px;
|
||||||
margin-left: 60px;
|
/* position: absolute;
|
||||||
margin-top: 12px;
|
left: 60px; */
|
||||||
|
background: #F5F5FB;
|
||||||
|
|
||||||
|
// z-index: -1;
|
||||||
|
.icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 12px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .cont {
|
||||||
|
color: #999999;
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.w_icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
position: absolute;
|
||||||
|
left: calc(100vw - 303px);
|
||||||
|
;
|
||||||
|
top: 22px;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.send {
|
.send {
|
||||||
|
|
|
||||||
21
yarn.lock
21
yarn.lock
|
|
@ -122,6 +122,16 @@
|
||||||
resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
|
resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
|
||||||
integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
|
integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
|
||||||
|
|
||||||
|
"@vant/popperjs@^1.3.0":
|
||||||
|
version "1.3.0"
|
||||||
|
resolved "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz#e0eff017124b5b2352ef3b36a6df06277f4400f2"
|
||||||
|
integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==
|
||||||
|
|
||||||
|
"@vant/use@^1.6.0":
|
||||||
|
version "1.6.0"
|
||||||
|
resolved "https://registry.npmmirror.com/@vant/use/-/use-1.6.0.tgz#237df3091617255519552ca311ffdfea9de59001"
|
||||||
|
integrity sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==
|
||||||
|
|
||||||
"@vitejs/plugin-vue@^4.4.0":
|
"@vitejs/plugin-vue@^4.4.0":
|
||||||
version "4.5.1"
|
version "4.5.1"
|
||||||
resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.5.1.tgz#84815bfeb46928c03a9ed765e4a8425c22345e15"
|
resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.5.1.tgz#84815bfeb46928c03a9ed765e4a8425c22345e15"
|
||||||
|
|
@ -217,7 +227,7 @@
|
||||||
"@vue/compiler-ssr" "3.3.10"
|
"@vue/compiler-ssr" "3.3.10"
|
||||||
"@vue/shared" "3.3.10"
|
"@vue/shared" "3.3.10"
|
||||||
|
|
||||||
"@vue/shared@3.3.10":
|
"@vue/shared@3.3.10", "@vue/shared@^3.0.0":
|
||||||
version "3.3.10"
|
version "3.3.10"
|
||||||
resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.10.tgz#1583a8d85a957d8b819078c465d2a11db7914b2f"
|
resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.10.tgz#1583a8d85a957d8b819078c465d2a11db7914b2f"
|
||||||
integrity sha512-2y3Y2J1a3RhFa0WisHvACJR2ncvWiVHcP8t0Inxo+NKz+8RKO4ZV8eZgCxRgQoA6ITfV12L4E6POOL9HOU5nqw==
|
integrity sha512-2y3Y2J1a3RhFa0WisHvACJR2ncvWiVHcP8t0Inxo+NKz+8RKO4ZV8eZgCxRgQoA6ITfV12L4E6POOL9HOU5nqw==
|
||||||
|
|
@ -422,6 +432,15 @@ to-regex-range@^5.0.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
is-number "^7.0.0"
|
is-number "^7.0.0"
|
||||||
|
|
||||||
|
vant@^4.8.0:
|
||||||
|
version "4.8.0"
|
||||||
|
resolved "https://registry.npmmirror.com/vant/-/vant-4.8.0.tgz#46cc6cf77593abb1ccf023629b3f47e15aade1dd"
|
||||||
|
integrity sha512-JeEcSd1zt0+fcSo/wuyvhF+dUdd1IaaJmrG0BTiUvH/XcBJEUaTSSEaYG0V8iI38xUTUCuDG+TSfSoSeEwGVAQ==
|
||||||
|
dependencies:
|
||||||
|
"@vant/popperjs" "^1.3.0"
|
||||||
|
"@vant/use" "^1.6.0"
|
||||||
|
"@vue/shared" "^3.0.0"
|
||||||
|
|
||||||
vite@^4.4.11:
|
vite@^4.4.11:
|
||||||
version "4.5.1"
|
version "4.5.1"
|
||||||
resolved "https://registry.npmmirror.com/vite/-/vite-4.5.1.tgz#3370986e1ed5dbabbf35a6c2e1fb1e18555b968a"
|
resolved "https://registry.npmmirror.com/vite/-/vite-4.5.1.tgz#3370986e1ed5dbabbf35a6c2e1fb1e18555b968a"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue