提交 f0ae7977 authored 作者: xiaotuoluo's avatar xiaotuoluo

1

上级 b6f574b8
File added
// module.exports = {
// plugins: {
// autoprefixer: {},
// // vw/vh配置
// 'postcss-px-to-viewport': {
// viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
// viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
// unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
// viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
// // selectorBlackList: ['.van'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
// minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
// mediaQuery: false, // 允许在媒体查询中转换`px`
// },
// }
// }
module.exports = {
plugins: {
autoprefixer: {},
// vw/vh配置
'postcss-px-to-viewport': {
viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
// selectorBlackList: ['.van'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false, // 允许在媒体查询中转换`px`
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'cqw',//cqw
minPixelValue: 1,
mediaQuery: false,
exclude: [/node_modules/],
},
},
}
}
<!DOCTYPE html>
<html lang="">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
<title><%= htmlWebpackPlugin.options.title %></title>
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script src="./comment.js"></script>
</head>
<body>
<style>
html,
body {
height: 100%;
margin: 0;
background: #f5f5f5;
}
#app {
width: min(100%, 450px); /* 手机=100%,PC<=450px */
height: 100dvh; /* 比 100vh 更适配手机地址栏 */
margin: 0 auto;
/* background: red; */
overflow-x: hidden;
border: 1px solid #e5e5e5;
box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
position: relative;
container-type: inline-size;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</body>
</html>
\ No newline at end of file
<template>
<div id="app">
<div style="display: flex; flex-direction: column;" id="app">
<div style="flex:1;overflow:auto">
<router-view></router-view>
</div>
<div>
<Footer v-if="footerShow"/>
</div>
</div>
</template>
<script>
......@@ -17,7 +22,7 @@ export default {
status: 0,
// footerPaths:['/Mine','/guide3','/Home','/guide1','/Choose'],
footerPaths:['/Mine','/guide3','/Home','/guide1','/Contract/index'],
footerShow:false
footerShow:false,
}
},
methods: {
......@@ -38,8 +43,27 @@ export default {
} else {
this.footerShow = false
}
},
lockDesktopVW () {
// const isDesktop = window.matchMedia('(hover:hover) and (pointer:fine)').matches
// const app = document.getElementById('app-wrapper')
// if (!app) return
// if (!isDesktop) {
// app.style.transform = ''
// app.style.width = ''
// app.style.height = ''
// app.style.left = ''
// app.style.top = ''
// return
// }
// const TARGET = 414
// app.style.width = TARGET + 'px'
// app.style.height = 1334 + 'px'
},
}
},
created() {
// document.title = ''
......@@ -47,6 +71,13 @@ export default {
this.getRouter();
},
mounted () {
this.lockDesktopVW()
window.addEventListener('resize', this.lockDesktopVW)
},
beforeDestroy () {
window.removeEventListener('resize', this.lockDesktopVW)
},
watch:{
'$route' (to, from) {
this.getRouter();
......@@ -55,7 +86,25 @@ export default {
}
</script>
<style>
/* #app {
top: 0;
right: 0;
left: 0;
margin: auto;
max-width: var(--ex-max-width);
container-type: inline-size;
} */
body .van-toast {
font-size: 1rem;
padding: 4vw;
......
......@@ -98,8 +98,13 @@ export function jiudianDetail (params){
params
})
}
//公告, /notice/getNoticeList
export function gongGao () {
return request({
url: '/notice/getNoticeList',
method:'get',
})
}
......
/* // 公共变量 */
:root {
/* // 最大宽度 */
--ex-max-width: 100%;
/* 白色 */
--ex-white: #fff;
/* 黑色 */
--ex-black: #000;
}
@media (min-width: 640px) {
/* // pc */
:root {
/* 最大宽度 */
--ex-max-width: 414px;
}
}
@media (max-width: 640px) {
:root {
/* 最大宽度 */
--ex-max-width: 100%;
}
}
* {
/* line-height: 1.2; */
user-select: none;
user-drag: none;
}
/* #app { */
/* width: 100%; */
/* max-width: var(--ex-max-width); */
/* } */
body {
font-family: "PingFang-SC", "Microsoft YaHei", "SimHei", "STHeiti", "Arial", sans-serif;
}
......@@ -31,11 +73,22 @@ p {
max-width: 60%;
margin: 0 auto;
color: #ffffff;
font-size: 35px !important;
font-size: 32px !important;
height: 100%;
display: flex;
align-items: center;
}
@media (hover: hover) and (pointer: fine) {
.van-nav-bar__title {
max-width: 60%;
margin: 0 auto;
color: #ffffff;
font-size: 16px !important;
height: 100%;
display: flex;
align-items: center;
}
}
.van-nav-bar {
line-height: 50px;
......@@ -44,6 +97,11 @@ p {
.van-nav-bar .van-icon {
font-size: 45px;
}
@media (hover: hover) and (pointer: fine) {
.van-nav-bar .van-icon {
font-size: 25px;
}
}
.van-hairline--bottom::after {
border-bottom-width: 0px;
......@@ -105,3 +163,11 @@ p {
content: "";
clear: both;
}
.van-toast {
max-width: 100px;
font-size: 20px;
/* margin-left: 0 auto;
left: 0;
right: 0; */
}
\ No newline at end of file
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
......@@ -72,3 +73,4 @@
@primary-color:#72B3FF;
@nav-bar-title-text-color:#fff;
// @notice-bar-font-size:24px;
<template>
<van-tabbar v-model="active" active-color="#775fd9" :border="true" inactive-color="#c54593" :key="tabbarKey">
<!-- <template>
<van-tabbar :fixed="false" v-model="active" active-color="#775fd9" :border="true" inactive-color="#c54593" :key="tabbarKey">
<van-tabbar-item v-for="(k, key) in item" replace :to="k.router" :key="key">
<span>{{ k.title }}</span>
<template #icon="props">
......@@ -104,7 +104,7 @@ export default {
<style lang="less" scoped>
@tabbar-height: 110px;
@tabbar-img: 75px;
@tabbar-img: 60px;
.van-tabbar {
height: @tabbar-height;
......@@ -112,12 +112,14 @@ export default {
background-color: #070404;
}
.van-tabbar-item__icon img {
height: @tabbar-img;
&.small {
height: 60px;
margin: 7.5px;
height: 50px;
margin: 3.5px;
}
}
......@@ -126,7 +128,7 @@ export default {
}
.van-tabbar-item {
font-size: 2.933vw;
font-size: 28px;
}
.tui {
......@@ -151,4 +153,192 @@ export default {
[class*="van-hairline"]::after {
border: none !important;
}
</style> -->
<template>
<div class="footerDiv">
<nav class="tabbar" role="tablist" aria-label="Main">
<router-link
v-for="(k, idx) in item"
:key="idx"
:to="k.router"
replace
class="tabbar-item"
:class="[{ active: idx === activeIndex }, k.class]"
role="tab"
:aria-selected="idx === activeIndex"
>
<div class="icon-wrap">
<img
:src="idx === activeIndex ? k.icon.active : k.icon.noactive"
:alt="k.title"
/>
</div>
<span class="label">{{ k.title }}</span>
</router-link>
</nav>
</div>
</template>
<script>
import emitter from '@/utils/emitter'
import { getImg } from '@/utils/tools'
export default {
name: 'FooterTabs',
data() {
return {
item: [
{
router: '/Home',
title: this.$t('common.tab_bar.tab_home'),
icon: {
active: getImg('home_active.png', 'footer'),
noactive: getImg('home_inactive.41093623.png', 'footer'),
},
class: 'small',
},
{
router: '/guide1',
title: this.$t('Gemeinschaft'),
icon: {
active: getImg('gamecraft_active.8e492d11.png', 'footer'),
noactive: getImg('gamecraft_inactive.6b5fa8e9.png', 'footer'),
},
class: 'small',
},
{
router: { path: '/Contract/index', query: { showBack: false } },
title: '',
icon: {
active: '/img/footer/beauty.52660ad12.png',
noactive: '/img/footer/beauty.52660ad12.png',
},
class: 'tui',
},
{
router: '/guide3',
title: 'Hotel',
icon: {
active: getImg('hotel_active.91198c7c.png', 'footer'),
noactive: getImg('hotel_inactive.646466ba.png', 'footer'),
},
class: 'small',
},
{
router: '/Mine',
title: 'Mein Konto',
icon: {
active: getImg('my_active.ae485b60.png', 'footer'),
noactive: getImg('my_Inactive.1914e00f.png', 'footer'),
},
class: 'small',
},
],
}
},
computed: {
activeIndex() {
// 按当前 path 找激活项(与原逻辑一致)
const path = this.$route.path
return this.item.findIndex((it) => {
const toPath = typeof it.router === 'object' ? it.router.path : it.router
return toPath === path
})
},
},
created() {
emitter.on('token-update', () => {})
},
}
</script>
<style lang="less" scoped>
/* ====== 外层容器(受父壳宽度约束) ====== */
.footerDiv {
position:absolute; left:0; right:0; bottom:0;
width: 100%;
/* 如需自身限宽居中,可打开下行(一般由外层壳控制) */
/* max-width: var(--ex-max-width, 450px); margin: 0 auto; */
}
/* ====== Tabbar 容器 ====== */
.tabbar {
display: flex;
align-items: stretch;
justify-content: space-between;
height: 110px; /* px:构建期会转 cqw */
background: #070404;
z-index: 5;
/* 圆角/阴影可按需添加 */
}
/* ====== 每个 tab ====== */
.tabbar-item {
flex: 1 1 0;
min-width: 0;
text-decoration: none;
color: #c54593; /* 未激活文字色(等同 inactive-color) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
}
/* 激活态颜色(等同 active-color) */
.tabbar-item.active {
color: #775fd9;
}
/* 图标区域(默认图标尺寸) */
.icon-wrap img {
display: block;
height: 60px; /* 原 @tabbar-img=60px */
}
/* 你原来的 small 类:略小一点的图标 */
.tabbar-item.small .icon-wrap img {
height: 50px;
margin: 8px;
}
/* 标签文字 */
.label {
font-size: 22px; /* 原 2.933vw ≈ 22px(按 750 估算) */
font-weight: 500;
line-height: 1.1;
text-align: center;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* 桌面(含大多数笔记本/台式机) */
@media (hover: hover) and (pointer: fine) {
.label {
font-size: 12px; /* PC 想要的大小 */
}
}
/* 中间凸起按钮(tui)——保持你的视觉 */
.tabbar-item.tui .icon-wrap {
width: 100px;
height: 100px;
margin-top: -80px; /* 往上浮一点 */
border-radius: 50%;
background: #9c4646;
border: 10px solid #fff; /* 原 1.333vw ≈ 10px */
display: flex;
align-items: center;
justify-content: center;
}
.tabbar-item.tui .icon-wrap img {
height: 46px; /* 放在圆形内的实际图标尺寸,可按需调 */
}
</style>
......@@ -21,6 +21,9 @@ Locale.use('de-DE', deDE);
import "video.js/dist/video-js.css";
import "@/assets/css/base.css";
Vue.prototype.$http = http;
Vue.prototype.common = common;
......@@ -28,6 +31,9 @@ Vue.config.productionTip = false;
Vue.use(VueClipboard);
Vue.use(VueAwesomeSwiper /* { default options with global component } */);
Vue.use(Vant);
Toast.setDefaultOptions({ duration: 5000 })
new Vue({
store,
......
<template>
<div class="page">
<!-- <van-nav-bar z-index="100" class="nav-black" :title="$t('交割合约')" ref="navbarRef" :border="false" left-arrow
safe-area-inset-top fixed placeholder @click-left="back">
</van-nav-bar> -->
<van-nav-bar fixed :title="$t('交割合约')" class="nav-bar">
<div>
<van-nav-bar :title="$t('交割合约')" class="nav-bar">
<template #left>
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
</van-nav-bar>
<div class="page">
<!-- <van-nav-bar z-index="100" class="nav-black" :title="$t('交割合约')" ref="navbarRef" :border="false" left-arrow
safe-area-inset-top fixed placeholder @click-left="back">
</van-nav-bar> -->
<div class="wrap">
<div class="infobox">
<div class="lbox">
<div class="lbox_l">
<span class="fe6im fzmm">{{ $t('合约金额') }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ $t('合约金额') }}</span>
</div>
<div class="lbox_r">
<span class="fe6im fzmmm">{{ info.num }}</span>
<span style="font-size: 14px;" class="fe6im fzmmm">{{ info.num }}</span>
</div>
</div>
<div class="lbox">
<div class="lbox_l">
<span class="fe6im fzmm">{{ $t('合约时长') }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ $t('合约时长') }}</span>
</div>
<div class="lbox_r">
<span class="fe6im fzmmm">{{ fTime(info?.time) }}</span>
<span style="font-size: 14px;" class="fe6im fzmmm">{{ fTime(info?.time) }}</span>
</div>
</div>
<div class="lbox">
<div class="lbox_l">
<span class="fe6im fzmm">{{ $t('合约类型') }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ $t('合约类型') }}</span>
</div>
<div class="lbox_r">
<span v-if="info.hyzd == 1" class="fzmmm" style="color:#0ecb81;">{{ $t('买涨') }}</span>
<span v-else-if="info.hyzd == 2" class="fzmmm" style="color:#f5465c;">{{ $t('买跌') }}</span>
<span v-if="info.hyzd == 1" class="fzmmm" style="color:#0ecb81;font-size: 14px;">{{ $t('买涨') }}</span>
<span v-else-if="info.hyzd == 2" class="fzmmm" style="color:#f5465c;font-size: 14px;">{{ $t('买跌') }}</span>
</div>
</div>
<div class="lbox">
<div class="lbox_l">
<span class="fe6im fzmm">{{ $t('合约状态') }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ $t('合约状态') }}</span>
</div>
<div class="lbox_r">
<span v-if="info.status == 2" class="fe6im fzmm">{{ $t('结算成功') }}</span>
<span v-else-if="info.status == 3" class="fe6im fzmm">{{ $t('失效结算') }}</span>
<span v-else-if="info.status == 1" class="fe6im fzmm">{{ $t('未结算') }}</span>
<span style="font-size: 14px;" v-if="info.status == 2" class="fe6im fzmm">{{ $t('结算成功') }}</span>
<span style="font-size: 14px;" v-else-if="info.status == 3" class="fe6im fzmm">{{ $t('失效结算') }}</span>
<span style="font-size: 14px;" v-else-if="info.status == 1" class="fe6im fzmm">{{ $t('未结算') }}</span>
</div>
</div>
<div class="lbox">
<div class="lbox_l">
<span class="fe6im fzmm">{{ $t('建仓单价') }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ $t('建仓单价') }}</span>
</div>
<div class="lbox_r">
<span class="fe6im fzmm">{{ info.buyprice }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ info.buyprice }}</span>
</div>
</div>
<div class="lbox">
<div class="lbox_l">
<span class="fe6im fzmm">{{ $t('建仓时间') }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ $t('建仓时间') }}</span>
</div>
<div class="lbox_r">
<span class="fe6im fzmm"> {{ info.buytime }}</span>
<span style="font-size: 14px;" class="fe6im fzmm"> {{ info.buytime }}</span>
</div>
</div>
<div class="lbox" v-if="info.status == 2">
<div class="lbox_l">
<span class="fe6im fzmm">{{ $t('平仓单价') }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ $t('平仓单价') }}</span>
</div>
<div class="lbox_r">
<span class="fe6im fzmm">{{ info.sellprice }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ info.sellprice }}</span>
</div>
</div>
<div class="lbox" v-if="info.status == 2">
<div class="lbox_l">
<span class="fe6im fzmm">{{ $t('平仓时间') }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ $t('平仓时间') }}</span>
</div>
<div class="lbox_r">
<span class="fe6im fzmm">{{ info.selltime }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ info.selltime }}</span>
</div>
</div>
<div class="lbox" v-if="info.status == 2">
<div class="lbox_l">
<span class="fe6im fzmm">{{ $t('盈亏金额') }}</span>
<span style="font-size: 14px;" class="fe6im fzmm">{{ $t('盈亏金额') }}</span>
</div>
<div class="lbox_r">
<span style="color:#f5465c;">{{ info.is_win == '2' ? '-' : '+' }}{{ info.ploss }}</span>
<span style="color:#f5465c;font-size: 14px;">{{ info.is_win == '2' ? '-' : '+' }}{{ info.ploss }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getContractOrderInfo } from '@/api/contract'
......@@ -154,8 +157,8 @@ export default {
height: 100px;
margin: 20px 0px;
background: #b7bdc6;
border-radius: 20px;
padding: 0px 20px;
border-radius: 14px;
padding: 0px 14px;
}
.lbox_l {
......@@ -177,7 +180,7 @@ export default {
.infobox {
width: 100%;
padding: 10px 40px;
margin-top: 20px;
margin-top: 14px;
}
.infotbox {
......
......@@ -12,9 +12,9 @@
<div class="wtlistbox">
<Empty v-if="!list.length" style="margin-top: 100px"> </Empty>
<div v-for="vo in list" :key="vo.id" class="listbox">
<div style="margin-top: 10px;" v-for="vo in list" :key="vo.id" class="listbox">
<div class="listbox_title clear">
<div class="listbox_title_l">
<div style="margin-top: 10px;" class="listbox_title_l">
<span v-if="vo.hyzd == 1" class="fcc f14 "
style="font-size:14px;font-weight:500;color: #0ecb81 ">{{ $t('买涨') }}:</span>
<span v-else class="fcc f14 "
......@@ -23,7 +23,7 @@
<span class="fcc f14 fe6im" style="font-size:14px;font-weight:500;">{{ cover(vo.coinname) }}</span>
</div>
<router-link class="clear" :to="{ path: '/Contract/cbillinfo', query: { bid: vo.id } }">
<div class="listbox_title_r">
<div style="margin-top: 10px;" class="listbox_title_r">
<span v-if="vo.status == 2" class="fcc" style="font-size:12px;color:#A9AEB8">{{
$t('结算成功') }}</span>
<span v-else-if="vo.status == 3" class="fcc" style="font-size:12px;color:#f5465c">{{
......@@ -37,25 +37,25 @@
<div style="width:100%;height:60px; " class="clear">
<div style="width:33.33%;height:60px;float:left;">
<div style="width:100%;height:30px;line-height:40px;"><span class="f12"
style="color:#6B7785;">{{ $t('投入金额') }} </span></div>
<div style="width:100%;height:30px;line-height:30px;"><span class=" f12 fce5">{{ vo.num
style="color:#6B7785;font-size: 14px;">{{ $t('投入金额') }} </span></div>
<div style="width:100%;height:30px;line-height:30px;font-size: 14px;"><span style="font-size: 14px;" class=" f12 fce5">{{ vo.num
}}</span>
</div>
</div>
<div style="width:33.33%;height:60px;float:left;">
<div style="width:100%;height:30px;line-height:40px;"><span class="f12"
style="color:#6B7785;">{{ $t('建仓单价') }}</span></div>
<div style="width:100%;height:30px;line-height:30px;"><span class=" f12 fce5">{{ vo.buyprice
style="color:#6B7785;font-size: 14px;">{{ $t('建仓单价') }}</span></div>
<div style="width:100%;height:30px;line-height:30px;font-size: 14px;"><span style="font-size: 14px;" class=" f12 fce5">{{ vo.buyprice
}}</span></div>
</div>
<div style="width:33.33%;height:60px;float:left;">
<div style="width:100%;height:30px;line-height:40px;text-align:right;"><span class="f12"
style="color:#6B7785;">{{ $t('建仓时间') }}</span></div>
<div style="width:100%;height:30px;line-height:30px;text-align:right;"><span
class=" f12 fce5">{{ vo.buytime }}</span></div>
<div style="width:100%;height:30px;line-height:40px;text-align:right;font-size: 14px;"><span class="f12"
style="color:#6B7785;font-size: 14px;">{{ $t('建仓时间') }}</span></div>
<div style="width:100%;height:30px;line-height:30px;text-align:right;font-size: 14px;"><span
class=" f12 fce5" style="font-size: 14px;">{{ vo.buytime }}</span></div>
</div>
</div>
<van-progress v-if="vo.status == 1" :pivot-text="vo.t" stroke-width="10" :show-pivot="true"
<van-progress style="margin-top: 15px;" v-if="vo.status == 1" :pivot-text="vo.t == null ? '' : String(vo.t)" stroke-width="10" :show-pivot="true"
track-color="#151515" color="linear-gradient(to right, #f77062, #fe5196)"
:percentage="100 - parseFloat(vo.bl ?? 0)" />
<!-- <div class="progress" style="height: 20px;background-color: #2C3445;color: white;text-align: center;">
......
......@@ -2,7 +2,7 @@
<van-empty :style="`height: ${emptyHeight}`"
image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="40">
<template #description>
<span :style="`color: ${emptyColor};`">{{ emptyTxt != '' ? emptyTxt : $t('暂时没有数据') }}</span>
<span style="font-size: 16px;" :style="`color: ${emptyColor};`">{{ emptyTxt != '' ? emptyTxt : $t('暂时没有数据') }}</span>
</template>
</van-empty>
</template>
......
<template>
<div class="page">
<div class="">
<van-nav-bar :title="$t('交割合约')" class="nav-bar">
<template #left>
<van-icon v-if="showBack" name="arrow-left" color="#fff" @click="back()" />
......@@ -19,7 +19,7 @@
</div>
<div class="wrap">
<div class="btnbox">
<div style="max-width: 440px; padding:14px;" class="btnbox">
<div class="btnbox_l" @click="showBuy(1)">
<span class="fzmm fe6" style="color:#fff;">{{ $t('买涨') }}</span>
</div>
......@@ -28,6 +28,7 @@
</div>
</div>
</div>
<!-- 弹窗 -->
<van-popup class="dialog_order_bg" position="bottom" v-model="show">
<img class="close" src="@/assets/img/close.png" width="18" height="18" @click="onClickBuy" />
<div class="content">
......@@ -355,18 +356,23 @@ export default {
}
.banner {
height: 100vh;
height: 100dvh;
width: 100%;
position: absolute;
// position: absolute;
overflow: hidden;
.banner_img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* 不重复显示图片 */
height: 100vh;
// height: 100dvh;
/* 设置页面高度为视口高度 */
width: 100%;
height: 100dvh;
// overflow: hidden;
object-fit: fill;
}
}
......@@ -506,6 +512,7 @@ export default {
.dialog_order_bg {
width: 100%;
// max-width: 450px;
height: auto;
// background: #2a405c;
margin: 0px auto;
......@@ -662,7 +669,169 @@ export default {
}
}
}
@media (hover: hover) and (pointer: fine) {
.dialog_order_bg {
width: 100%;
max-width: 440px;
margin-left: calc(50% - 225px);
height: auto;
// background: #2a405c;
// margin: 0px auto;
border-radius: 20px 20px 0 0;
padding: 10px;
position: fixed;
bottom: 0px;
.close {
margin-left: calc(100% - 60px)
}
.label {
width: 100%;
margin-bottom: 0.5rem;
margin-top: 10px;
padding-left: 5px;
// color: #768da9;
color: #000
}
.order_option {
display: flex;
/* 启用flex布局 */
flex-wrap: wrap;
/* 允许子元素换行 */
align-items: flex-start;
/* 对齐子元素到容器的顶部 */
justify-content: flex-start;
/* 从容器的起始位置开始排列子元素 */
width: 100%;
height: auto;
/* 高度自适应 */
overflow: visible;
/* 不需要滚动条 */
margin-top: 5px;
.item {
width: 20%;
min-width: 55px;
max-width: 83px;
height: 58px;
background: #1eb585;
float: left;
margin-right: 5px;
margin-left: 5px;
border-radius: 10px;
padding: 5px;
margin-bottom: 10px;
color: #fff;
display: flex;
flex-direction: column;
text-align: center;
font-weight: 500;
&>span:first-child {
font-size: 14px;
margin-top: 5px;
}
&>span:last-child {
font-size: 12px;
margin-top: 5px;
}
}
.select {
background: #f5465c !important;
}
}
.edit {
height: 40px;
border-radius: 5px;
background: #e6e6e6;
text-align: center;
padding: 10px 10px;
font-size: 1em;
}
.optitle {
margin-top: 30px;
display: flex;
// padding: 0px 20px;
color: #768da9;
font-size: 12px;
height: 50px;
gap: 5px;
.item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
&>span:first-child {
height: 30px;
text-align: center;
width: 100%;
}
&>span:last-child {
height: 20px;
// line-height: 40px;
text-align: center;
}
}
}
.timer_t_box {
width: 100%;
min-height: 160px;
margin: 40px 0;
border-radius: 10px;
border: 1px solid #1eb585;
color: #000;
font-size: 28px;
.item {
width: 90%;
margin: 20px auto;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
}
.wait_box_info {
width: 100%;
height: 280px;
line-height: 280px;
text-align: center;
/* background: #2c2d2e; */
margin: 0 auto;
margin-top: 40px;
border-radius: 20px;
border: 1px solid #1eb585;
}
.circle {
// --van-circle-text-color: #fff !important;
// --van-circle-text-font-size: 44px !important;
// --van-circle-text-font-weight: bold;
::v-deep .van-circle__text {
font-size: 44px;
color: #000;
font-weight: bold
}
}
}
}
.dong_order_x {
......
<template>
<div style="padding: 16px;">
<van-nav-bar class="nav-bar" title="Detail" fixed>
<div>
<van-nav-bar class="nav-bar" title="Detail">
<template #left>
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
</van-nav-bar>
<div style="padding: 16px;">
<!-- <div style="margin-top: 55px;" class="masonry-wrap">
<div class="masonry">
<div v-for="(item, i) in hotelList" :key="i" class="masonry-item">
<img :src="'http://172.93.218.201:1516' + item.img_url" alt="" loading="lazy">
</div>
</div>
</div> -->
<div class="title" style="margin-top: 55px;">{{hotelDetail.hotel_name}}</div>
<van-swipe :autoplay="3000" style="height:200px;" >
</div> -->
<div class="title" style="margin-top: 5px;">{{ hotelDetail.hotel_name }}</div>
<van-swipe :autoplay="3000" style="height:200px;">
<van-swipe-item v-for="(item, index) in bannarsImg" :key="index">
<img :src="fullUrl1(item)" style="width:100%; height:200px; object-fit:cover;" />
</van-swipe-item>
......@@ -40,7 +42,9 @@
</div>
<div class="title">Pet Policy</div>
<div class="content">We charge a surcharge EUR 25.00 pet per night.Assistance dogs are free of charge.Bookings with dogs are possible in all room categpries</div>
<div class="content">We charge a surcharge EUR 25.00 pet per night.Assistance dogs are free of charge.Bookings
with
dogs are possible in all room categpries</div>
<div class="title">Sustainability Certification</div>
<div class="content">Our hotel has a third-party sustainability certification</div>
......@@ -50,28 +54,32 @@
<h2 class="title">Hotel Location</h2>
<div id="map" style="width: 100%; height: 200px;"></div>
<div class="content">{{hotelDetail.address}}</div>
<div class="content">{{ hotelDetail.address }}</div>
<div class="title">Hotel Reviews</div>
<div style="border: solid 1px #f6f6f6;padding: 10px; border-radius: 8px;margin-top: 10px;" v-for="item in pl" :key="item.id">
<div style="border: solid 1px #f6f6f6;padding: 10px; border-radius: 8px;margin-top: 10px;" v-for="item in pl"
:key="item.id">
<div style="font-size: 16px;">{{ item.name }}</div>
<div><van-rate :value="Number(item.fs)" allow-half void-icon="star" void-color="#eee" /></div>
<div style="color: #6c6c6c;font-size: 14px;margin-top: 8px;">{{ item.content }}</div>
</div>
</div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import petImg from '@/assets/pet.png'
import wifiImg from '@/assets/wifi.png'
import renzheng from '@/assets/renzheng.png'
import { jiudianDetail } from '@/api/contract'
import { nowLocationUrl } from '@/utils/tools'
</div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import petImg from '@/assets/pet.png'
import wifiImg from '@/assets/wifi.png'
import renzheng from '@/assets/renzheng.png'
import { jiudianDetail } from '@/api/contract'
import { nowLocationUrl } from '@/utils/tools'
export default {
export default {
name: 'LeafletMap',
data() {
return {
......@@ -79,26 +87,26 @@
marker: null,
// hotelList:[],
bannarsImg: [],
hotelDetail:{},
wd:0,
jd:0,
address:'',
pl:[],
petImg:petImg,
renzheng:renzheng,
wifiImg:wifiImg
hotelDetail: {},
wd: 0,
jd: 0,
address: '',
pl: [],
petImg: petImg,
renzheng: renzheng,
wifiImg: wifiImg
}
},
mounted() {
const id = this.$route.query.id
console.log('这个ID是:',id)
console.log('这个ID是:', id)
// this.initMap()
this.getJiuDianDetail(id)
},
methods: {
initMap() {
// 固定位置坐标(例如成都锦里)
const location = [this.wd,this.jd]
const location = [this.wd, this.jd]
// 初始化地图
this.map = L.map('map').setView(location, 15) // 15 是缩放级别
// 添加 OpenStreetMap 图层
......@@ -114,13 +122,13 @@
.bindPopup(this.address)
.openPopup()
},
back(){
back() {
this.$router.back()
},
async getJiuDianDetail(id) {
const res = await jiudianDetail({id:id})
if(res.code == 200){
const res = await jiudianDetail({ id: id })
if (res.code == 200) {
this.hotelDetail = res.data
this.bannarsImg = res.data.img_url
this.address = res.data.hotel_name
......@@ -129,70 +137,96 @@
this.pl = res.data.pl
this.initMap()
}
console.log('酒店详情:',res.data)
console.log('酒店详情:', res.data)
},
fullUrl1 (p) {
fullUrl1(p) {
if (!p) return ''
return nowLocationUrl + p
},
},
created(){
created() {
},
}
</script>
}
</script>
<style scoped>
#map {
<style scoped>
#map {
width: 100%;
height: 100%;
}
}
.masonry-wrap{
padding: 8px; /* 外层留白,像截图那样 */
background: #f3f4f6; /* 可选的浅灰背景 */
.masonry-wrap {
padding: 8px;
/* 外层留白,像截图那样 */
background: #f3f4f6;
/* 可选的浅灰背景 */
border-radius: 12px;
}
/* 关键:多列布局 */
.masonry{
column-gap: 12px; /* 列间距 ≈ 截图中的水平间隙 */
column-count: 2; /* 固定两列;也可做响应式 */
.masonry {
column-gap: 12px;
/* 列间距 ≈ 截图中的水平间隙 */
column-count: 2;
/* 固定两列;也可做响应式 */
}
/* 让每个卡片在列中独立排布且不被拆分 */
.masonry-item{
break-inside: avoid; /* 避免跨列断开 */
margin-bottom: 12px; /* 垂直间距 */
border-radius: 12px; /* 圆角卡片 */
overflow: hidden; /* 裁剪图片圆角 */
background: #fff; /* 有轻微“卡片感” */
.masonry-item {
break-inside: avoid;
/* 避免跨列断开 */
margin-bottom: 12px;
/* 垂直间距 */
border-radius: 12px;
/* 圆角卡片 */
overflow: hidden;
/* 裁剪图片圆角 */
background: #fff;
/* 有轻微“卡片感” */
/* 可选阴影: */
box-shadow: 0 2px 8px rgba(0,0,0,.06);
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.masonry-item img{
.masonry-item img {
display: block;
width: 100%;
height: auto; /* 让高度随比例变化 */
object-fit: cover; /* 如果想更“紧致”,保留 */
height: auto;
/* 让高度随比例变化 */
object-fit: cover;
/* 如果想更“紧致”,保留 */
}
.title{
.title {
font-size: 32px;
margin-top: 40px;
margin-bottom: 5px;
/* font-weight: bold; */
}
.content{
@media (hover: hover) and (pointer: fine) {
.title {
font-size: 16px;
margin-top: 20px;
margin-bottom: 5px;
/* font-weight: bold; */
}
}
.content {
font-size: 28px;
line-height: 40px;
color: #6c6c6c;
margin-top: 10px;
}
</style>
\ No newline at end of file
@media (hover: hover) and (pointer: fine) {
.content {
font-size: 14px;
line-height: 20px;
color: #6c6c6c;
margin-top: 5px;
}
}
</style>
\ No newline at end of file
<template>
<div class="home-container">
<div class="wrap">
<!-- 顶部导航栏 -->
<div class="nav-bar newnavbar van-nav-bar van-hairline--bottom">
<div class="van-nav-bar__content">
......@@ -13,13 +13,15 @@
color: #fff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);">
Kommentar
</div>
<div class="van-nav-bar__right">
</div>
<div @click="openSecondChat" class="van-nav-bar__right">
<i class="van-icon van-icon-chat-o"></i>
</div>
</div>
</div>
<div class="wrap">
<!-- 关于部分 -->
<section id="about">
......@@ -312,6 +314,8 @@
</template>
<script>
import { openChat } from '@/utils/chat'
// import Footer from '@/components/footer'
// import index2 from './index2.vue'
......@@ -343,6 +347,9 @@ export default {
gotoMenu(router) {
this.$router.replace(router)
},
openSecondChat(){
openChat()
}
},
}
</script>
......@@ -350,7 +357,7 @@ export default {
<style lang="less" scoped>
/* 置顶导航条 */
::v-deep(.nav-bar.newnavbar.van-nav-bar) {
position: fixed;
// position: fixed;
/* 固定在顶部 */
top: 0;
left: 0;
......
<template>
<div class="home-container px">
<div class="wrap">
<!-- 顶部导航栏 -->
<div class="nav-bar newnavbar van-nav-bar van-hairline--bottom">
......@@ -14,13 +13,15 @@
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);">
HotelS
</div>
<div class="van-nav-bar__right">
<div @click="openHotelChat" class="van-nav-bar__right">
<i class="van-icon van-icon-chat-o" style="color:#fff;"></i>
</div>
</div>
</div>
<!-- -->
<div class="wrap">
<div v-if="images && images.length" style="position: relative; margin-top:50px;">
<div v-if="images && images.length" style="position: relative; margin-top:2px;">
<!-- 轮播 -->
<van-swipe :autoplay="3000" style="height:200px;">
<van-swipe-item v-for="(item, index) in images" :key="index">
......@@ -40,6 +41,10 @@
</div>
</div>
<div style="display: flex;align-items: center;justify-content: center;padding: 10px;">
<span style="font-size: 20px;font-weight: bold;">Bellebte Hotels</span>
</div>
<div style="margin-top: 5px;" class="masonry-wrap">
<div class="masonry">
<div v-for="(item, i) in hotelList" :key="i" class="masonry-item">
......@@ -105,6 +110,7 @@
<script>
import { jiudianList,lunbo } from '@/api/contract'
import { openChat } from '@/utils/chat'
import { nowLocationUrl } from '@/utils/tools'
// import Footer from '@/components/footer';
......@@ -159,11 +165,14 @@ export default {
tapImgItem(item){
this.$router.push({ path: "/detail",query: { id: String(item.id) } },)
},
openHotelChat(){
openChat()
}
},
mounted() {
this.origin = window.location.origin
this.origin1 = window.location.origin
this.origin = nowLocationUrl
this.origin1 = nowLocationUrl
this.getLunBoHotel()
this.getJiuDianList()
},
......@@ -174,7 +183,7 @@ export default {
<style lang='less' scoped>
/* 置顶导航条 */
::v-deep(.nav-bar.newnavbar.van-nav-bar) {
position: fixed;
// position: fixed;
/* 固定在顶部 */
top: 0;
left: 0;
......
......@@ -8,7 +8,7 @@
class="van-image__img" />
</div>
</div>
<div class="van-nav-bar__right">
<div @click="onOpenChat" class="van-nav-bar__right">
<i class="van-icon van-icon-chat-o" style="color:#fff; font-size:24px;"></i>
</div>
</div>
......@@ -25,33 +25,33 @@
<!-- 公告栏滚动 -->
<div class="notice-bar">
<van-notice-bar scrollable speed="50" left-icon="volume-o" :text="currentNotice" color="#000"
background="#fff" class="notice-swipe" />
background="#fff" class="notice-swipe"/>
<div class="linear-gradient"></div>
</div>
<div class="middelTit">
<span class="middelTit-left">High-end Zone</span>
<div class="middelTit-right">Enjoy the ultimate luxury experience</div>
<span style="font-size: 13px;" class="middelTit-left">High-end Zone</span>
<div style="font-size: 10px;" class="middelTit-right">Enjoy the ultimate luxury experience</div>
</div>
<div class="middleImg">
<div @click="pushDetail(value)" v-for="(value,index) in gridItems" class="grid-item" :key="index">
<img style="width: 200px; height: 200px;border-radius: 10px;" :src="fullImgUrl(value.img_url)" alt="">
<div class="gridItemTag">
<span class="textTag">Yes</span>
<span style="font-size: 16px;" class="textTag">Yes</span>
</div>
</div>
</div>
<!-- 列表的啦 -->
<div style="font-size: 14px;margin-left: 3px;margin-top: 13px;">Recommended connections</div>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list :immediate-check="false" :offset="200" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onload">
<van-list :immediate-check="false" :offset="200" v-model="loading" :finished="finished" finished-text="Keine weiteren Inhalte." @load="onload">
<van-cell v-for="(value,index) in homeList" :key="index">
<template #default>
<div class="listItem">
<div class="listLeft">
<img class="listImg" style="object-fit: cover;width: 200px;height: 120px;" :src="fullImgUrl(value.img_url)" alt="">
<div class="gridItemTag1">
<span class="textTag1">Great</span>
<span style="font-size: 16px;" class="textTag1">Great</span>
</div>
</div>
......@@ -96,7 +96,8 @@ import img9 from '@/assets/user/9.jpg'
import tagImg from '@/assets/tag.jpg'
import starsImg from '@/assets/stars.jpg'
import { nowLocationUrl } from '@/utils/tools'
import { lunbo,xuanfeiList } from '@/api/contract'
import { lunbo,xuanfeiList,gongGao } from '@/api/contract'
import { openChat } from '@/utils/chat'
export default {
data() {
......@@ -144,11 +145,8 @@ export default {
}
},
mounted() {
this.currentNotice = this.notices[0];
setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.notices.length;
this.currentNotice = this.notices[this.currentIndex];
}, 5000);
this.getGongGaoList()
this.getBannerHome()
this.getMiddelImg()
this.getListHome()
......@@ -212,14 +210,40 @@ export default {
this.loading = false
}
},
async getGongGaoList(){
const res = await gongGao()
if(res.code == 200){
this.notices = res.data
// console.log('当前的公告是:',res)
this.currentNotice = this.notices[0].name + ':' + this.notices[0].text;
setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.notices.length;
this.currentNotice = this.notices[this.currentIndex].name + ':' + this.notices[this.currentIndex].text;
}, 5000);
}
},
fullImgUrl(imgUrl){
if(!imgUrl){
return ''
}
// console.log('图片地址:',nowLocationUrl + imgUrl)
return nowLocationUrl + imgUrl
},
onOpenChat(){
openChat()
}
}
}
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/68cbe92fb285fd192a490592/1j5e8dp99';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<style lang="scss" scoped>
......@@ -246,20 +270,40 @@ export default {
background: #fff;
color: #000;
font-weight: 500;
font-size: 28px;
}
/* 控制文字部分 */
:deep(.van-notice-bar__wrap) {
height: 40px;
display: flex;
align-items: center;
font-size: 28px;
font-size: 32px;
line-height: 26px;
}
// PC
@media (hover: hover) and (pointer: fine) {
.notice-swipe {
background: #fff;
color: #000;
font-weight: 500;
font-size: 14px;
}
/* 控制文字部分 */
:deep(.van-notice-bar__wrap) {
height: 40px;
display: flex;
align-items: center;
font-size: 18px;
line-height: 26px;
}
}
/* 左侧图标大小 */
:deep(.van-notice-bar__left-icon .van-icon) {
font-size: 32px;
font-size: 40px;
color: #000;
margin-right: 16px;
}
......@@ -320,7 +364,7 @@ export default {
position: absolute;
bottom: 5px;
left: 80px;
font-size: 30px;
// font-size: 30px;
}
}
}
......@@ -331,14 +375,14 @@ export default {
align-items: center;
font-weight: 500;
&-left{
font-size: 26px;
// font-size: 26px;
}
&-right{
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #000;
color: #fff;
font-size: 20px;
// font-size: 20px;
padding: 5px;
margin-left: 10px;
}
......@@ -379,7 +423,7 @@ export default {
position: absolute;
bottom: 5px;
left: 60px;
font-size: 30px;
// font-size: 30px;
}
}
......
<template>
<div>
<van-nav-bar class="nav-bar" title="Detail" >
<template #left>
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
</van-nav-bar>
<div class="imgBanner">
<van-swipe :autoplay="null" :initial-swipe="nowIndex" indicator-color="white" style="height: 100%;">
<van-swipe-item v-for="(item, index) in imgs" :key="index">
<van-image :src="fullImgUrl(item)" width="100%" height="100%" fit="cover" />
</van-swipe-item>
</van-swipe>
</div>
</div>
</template>
<script>
import { nowLocationUrl } from '@/utils/tools';
export default{
data(){
return{
imgs:[],
nowIndex:null
}
},
mounted(){
const q = this.$route.query.data;
if (!q) return;
try {
this.imgs = JSON.parse(decodeURIComponent(atob(q)));
} catch { this.imgs = []; }
this.nowIndex = this.$route.query.nowIndex
// console.log('显示吧:',this.imgs)
},
methods:{
fullImgUrl(imgUrl){
return nowLocationUrl + imgUrl
},
back(){
this.$router.back()
}
}
}
</script>
<style lang="scss" scoped>
.imgBanner{
width: 100%;
align-items: center;
height: 100vh;
}
</style>
\ No newline at end of file
......@@ -3352,6 +3352,7 @@ export default {
});
},
};
</script>
<style lang="less" scoped>
......
<template>
<div class="detailContainer">
<van-nav-bar class="nav-bar" title="Detail" fixed>
<div>
<van-nav-bar class="nav-bar" title="Detail" >
<template #left>
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
</van-nav-bar>
<div class="headerView" style="margin-top: 54px;">
<div class="detailContainer">
<div class="headerView" style="margin-top: 18px;">
<div style="display: flex;flex-direction: column;">
<span style="font-size: 24px; font-weight: bold;">{{personData?.xuanfei_name || 'No Name'}}</span>
<span style="font-size: 14px;line-height: 20px;margin-top: 5px;">Height:{{personData?.height}}cm Bust:{{personData?.bust}}</span>
<div class="tag" style="margin-top: 5px;">{{ personData?.introduce }}</div>
<div class="tag" style="margin-top: 5px;font-size: 13px;">{{ personData?.introduce }}</div>
<div style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<span style="font-size: 14px;">Charge range:</span>
<img style="width: 100px;" :src="starImg" alt="">
......@@ -25,7 +24,7 @@
<span>{{personData?.like}}</span>
</div>
<div style="padding: 10px;background-color: #000;
<div @click="openDetailChat" style="padding: 10px;background-color: #000;
color: #fff;font-size: 15px;margin-top: 25px;border-radius: 100px;">Reserve now</div>
</div>
</div>
......@@ -43,7 +42,7 @@
</div>
<!-- 222222 -->
<div style="margin-top: 15px;">
<img :src="fullImgUrl(nowImgSrc)" style="width: 100%;" alt="">
<img @click="tapFullImg" :src="fullImgUrl(nowImgSrc)" style="width: 100%;" alt="">
</div>
<!-- 333333 -->
<div style="margin-top: 15px;">
......@@ -51,6 +50,8 @@
<div style="font-size: 15px;margin-top: 8px;line-height: 18px;">{{personData.introduce}}</div>
</div>
</div>
</div>
</template>
......@@ -65,6 +66,7 @@ import img4 from '@/assets/user/4.jpg'
import img5 from '@/assets/user/5.jpg'
import { xuanfeiDetail } from '@/api/contract'
import { nowLocationUrl } from '@/utils/tools'
import { openChat } from '@/utils/chat'
export default{
data(){
......@@ -109,6 +111,13 @@ export default{
},
fullImgUrl(imgUrl){
return nowLocationUrl + imgUrl
},
tapFullImg(){
const payload = btoa(encodeURIComponent(JSON.stringify(this.imgUrls)));
this.$router.push({path:'/imgShow',query:{nowIndex:this.nowImgIndex,data:payload}})
},
openDetailChat(){
openChat()
}
}
}
......@@ -131,7 +140,7 @@ export default{
border-radius: 8px;
padding: 8px 15px 8px 15px;
color: #fff;
font-size: 26px;
/* font-size: 26px; */
max-width: 300px;
}
......
......@@ -241,7 +241,7 @@ export default {
@import '../../assets/css/base.css';
.video-background {
position: fixed;
// position: fixed;
top: 0;
left: 0;
width: 100%;
......@@ -405,4 +405,109 @@ export default {
.language-selector option {
padding: 5px 10px;
}
// PC=====
@media (hover: hover) and (pointer: fine) {
.login .wrapper .title {
line-height: 50px;
text-align: center;
font-size: 25px;
font-weight: 700;
color: #fff;
letter-spacing: 5px;
}
.login .wrapper .loginForm {
padding: 30px 5%;
}
.login .wrapper .loginForm .input {
// padding: 10px 20px;
padding: 20px 20px;
margin-top: 30px;
border-radius: 25px;
text-align: center;
line-height: 25px;
font-size: 15px;
color: #000;
}
::v-deep .van-field__right-icon .van-icon {
font-size: 25px;
}
::v-deep .van-icon {
font-size: 25px;
}
.login .wrapper .loginForm .reset-text {
margin: 15px 12px;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 12px;
}
.login .wrapper .loginForm .reset-text span {
color: #fff;
font-weight: 500;
}
.login .wrapper .loginForm .register-text {
// margin: 10px 0;
// display: flex;
// align-items: center;
// justify-content: center;
// font-size: 24px;
margin-top: 20px;
width: 100%;
height: 55px;
border-radius: 25px;
color: #fff;
background: @primary-bg;
font-size: 15px;
font-weight: bolder;
border: none;
}
.login .wrapper .loginForm .register-text span {
color: #fff;
font-weight: 400;
}
.login .wrapper .loginForm .active {
}
.login .wrapper .loginForm .login-btn {
margin-top: 20px;
width: 100%;
height: 55px;
border-radius: 50px;
color: #fff;
// background-color: #7e5678;
background: @primary-bg;
font-size: 15px;
font-weight: bolder;
border: none;
}
.language-selector {
font-family: Arial, sans-serif;
position: fixed; /* 或者根据需要调整位置 */
top: 10px;
right: 10px;
z-index: 1000;
}
.language-selector select {
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.language-selector select:hover {
border-color: #888;
}
.language-selector select:focus {
outline: none;
border-color: #555;
}
.language-selector option {
padding: 5px 10px;
}
}
</style>
......@@ -297,4 +297,98 @@ export default {
border-color: rgb(126, 86, 120);
background-color: rgb(126, 86, 120);
}
// PC=====
@media (hover: hover) and (pointer: fine) {
.register .wrapper .title {
line-height: 50px;
text-align: center;
font-size: 25px;
font-weight: 700;
color: #fff;
letter-spacing: 5px;
// background-color: red;
margin-top: 30px;
}
.register .wrapper .loginForm {
padding: 30px 5%;
}
.register .wrapper .loginForm .input {
// padding: 10px 20px;
padding: 20px 20px;
margin-top: 30px;
border-radius: 25px;
text-align: center;
line-height: 25px;
font-size: 15px;
color: #4e4e4e;
}
::v-deep .van-field__right-icon .van-icon {
font-size: 25px;
}
::v-deep .van-icon {
font-size: 25px;
}
.register .wrapper .loginForm .reset-text {
margin: 15px 8px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.register .wrapper .loginForm .reset-text span {
color: #fff;
font-size: 13px;
font-weight: 500;
line-height: 8px;
}
.register .wrapper .loginForm .register-text {
margin: 5px 0;
display: flex;
align-items: center;
justify-content: center;
}
.register .wrapper .loginForm .register-text span {
color: #fff;
font-size: 13px;
font-weight: 500;
line-height: 10px;
}
.register .wrapper .loginForm .login-btn {
margin-top: 43px;
width: 100%;
height: 55px;
border-radius: 25px;
color: #fff;
// background-color: #7e5678;
// background: linear-gradient(90deg,#6529c9,#cc2996);
background: @primary-bg;
font-size: 15px;
font-weight: bolder;
border: none;
}
.register .wrapper .loginForm .agreement {
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.register .wrapper .loginForm .agreement .agreement-text {
margin-left: 5px;
font-size: 13px;
color: #fff;
font-weight: 500;
line-height: 15px;
}
::v-deep .agreement .van-icon {
font-size: 15px;
}
::v-deep .agreement .van-checkbox__icon {
font-size: 19px;
}
::v-deep .agreement .van-checkbox__icon--checked .van-icon {
color: #fff;
border-color: rgb(126, 86, 120);
background-color: rgb(126, 86, 120);
}
}
</style>
......@@ -19,13 +19,13 @@
<!-- 数字键盘 -->
<!-- <van-number-keyboard v-model="paypassword" :show="showKeyboard" @blur="showKeyboard = false" /> -->
<van-field v-model="paypassword" :placeholder="$t('mine.enterthefundpassword')" :maxLength="6"
<van-field style="font-size: 16px;" v-model="paypassword" :placeholder="$t('mine.enterthefundpassword')" :maxLength="6"
type="password" />
</div>
</div>
<div class="bank">
<van-button class="sign-out" :loading="loading" type="primary" size="normal" @click="onSubmit()">{{
<van-button style="font-size: 16px;" class="sign-out" :loading="loading" type="primary" size="normal" @click="onSubmit()">{{
$t("common.logout") }}</van-button>
</div>
</div>
......
......@@ -7,10 +7,10 @@
</van-nav-bar>
<div class="main-content">
<div @click="openHerderImg()" class="item van-hairline--bottom">
<div class="left">{{ $t('mine.herderImg') }}</div>
<div style="font-size: 18px;" class="left">{{ $t('mine.herderImg') }}</div>
<div class="right">
<img :src="this.userInfo.header_img" />
<van-icon name="arrow" />
<van-icon size="20px" name="arrow" />
</div>
</div>
<van-popup
......@@ -18,6 +18,7 @@
position="bottom"
round
:style="{ height: '50%' }"
class="pop"
>
<div class="avatarbox">
<div class="title van-hairline--bottom">
......@@ -47,38 +48,38 @@
</div>
</van-popup>
<div class="item van-hairline--bottom" @click="toSetName()">
<div class="left">{{ $t('mine.actualname') }}</div>
<div style="font-size: 18px;" class="left">{{ $t('mine.actualname') }}</div>
<div class="right">
<span class="desc">{{
<span style="font-size: 18px;" class="desc">{{
this.userInfo.name
? this.userInfo.name
: this.$t('common.notset')
}}</span>
<van-icon name="arrow" />
<van-icon size="20px" name="arrow" />
</div>
</div>
<div class="item van-hairline--bottom" @click="toSetSex()">
<div class="left">{{ $t('mine.sex') }}</div>
<div style="font-size: 18px;" class="left">{{ $t('mine.sex') }}</div>
<div class="right">
<span class="desc">{{
<span style="font-size: 18px;" class="desc">{{
this.userInfo.sex !== '0'
? this.userInfo.sex === '1'
? this.$t('mine.male')
: this.$t('mine.female')
: this.$t('mine.unknown')
}}</span>
<van-icon name="arrow" />
<van-icon size="20px" name="arrow" />
</div>
</div>
<div class="item van-hairline--bottom" @click="toSetBank()">
<div class="left">{{ $t('mine.bindinginformation') }}</div>
<div style="font-size: 18px;" class="left">{{ $t('mine.bindinginformation') }}</div>
<div class="right">
<span class="desc">{{
<span style="font-size: 18px;" class="desc">{{
this.isBank
? this.$t('mine.bound')
: this.$t('mine.none')
}}</span>
<van-icon name="arrow" />
<van-icon size="20px" name="arrow" />
</div>
</div>
</div>
......@@ -242,4 +243,56 @@ export default {
height: 95px;
border: 6px solid #e6c3a1;
}
@media (hover: hover) and (pointer: fine) {
.pop{
width: 100%;
max-width: 440px;
margin-left: calc(50% - 225px);
height: auto;
// background: #2a405c;
// margin: 0px auto;
border-radius: 20px 20px 0 0;
padding: 10px;
position: fixed;
bottom: 0px;
}
.avatarbox {
padding: 15px;
color: #000;
height: 81%;
background-color: #fff;
}
.avatarbox .title {
padding: 8px 10px 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
.avatarbox .content .van-image {
width: 52px;
height: 52px;
margin: 2.5%;
border-radius: 50%;
}
.avatarbox .content {
padding-bottom: 5px;
height: 100%;
overflow-y: auto;
padding-top: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.avatarbox .content .choose {
width: 53px;
height: 53px;
border: 6px solid #e6c3a1;
}
}
</style>
......@@ -101,4 +101,49 @@ export default {
color: #656566;
font-size: 30px;
}
// PC
@media (hover: hover) and (pointer: fine) {
::v-deep .van-pull-refresh__track .van-pull-refresh__head * {
color: #000000;
font-size: 18px;
}
::v-deep .van-loading__text {
color: #000000;
font-size: 18px;
}
.container .content {
height: calc(100% - 20px);
overflow: auto;
}
.container .content .listItem {
margin-bottom: 20px;
padding: 20px 20px 0;
position: relative;
color: #000;
background-color: #fff;
}
.container .content .listItem .listTitle {
font-size: 19px;
}
.container .content .listItem .listContent {
border-bottom: 2px solid #f2f2f5;
padding: 5px 0;
font-size: 13px;
}
.container .content .listItem .listTime {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
height: 35px;
}
.container .content .listItem .listTime .listTimeText {
color: #656566;
font-size: 15px;
}
}
</style>
......@@ -5,7 +5,7 @@
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
<template #right>
<span class="nav-right" @click="save()">{{
<span style="font-size: 18px;" class="nav-right" @click="save()">{{
$t('common.save')
}}</span>
</template>
......@@ -18,9 +18,9 @@
:maxLength="6"
type="number"
/> -->
<van-field v-model="o_new_password" :label="$t('mine.newpassword')"
<van-field style="font-size: 18px;" v-model="o_new_password" :label="$t('mine.newpassword')"
:placeholder="$t('mine.inp_newpassword')" :maxLength="6" type="number" />
<van-field v-model="t_new_password" :label="$t('mine.newpassword')"
<van-field style="font-size: 18px;" v-model="t_new_password" :label="$t('mine.newpassword')"
:placeholder="$t('mine.inp_newpassword1')" :maxLength="6" type="number" />
</van-cell-group>
</div>
......
......@@ -5,23 +5,26 @@
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
<template #right>
<span class="nav-right" @click="save()">{{
<span style="font-size: 18px;" class="nav-right" @click="save()">{{
$t('common.save')
}}</span>
</template>
</van-nav-bar>
<van-cell-group>
<van-field
style="font-size: 18px;"
v-model="old_password"
:label="$t('mine.OldPassword')"
:placeholder="$t('mine.inp_OldPassword')"
/>
<van-field
style="font-size: 18px;"
v-model="o_new_password"
:label="$t('mine.newpassword')"
:placeholder="$t('mine.inp_newpassword')"
/>
<van-field
style="font-size: 18px;"
v-model="t_new_password"
:label="$t('mine.newpassword')"
:placeholder="$t('mine.inp_newpassword1')"
......
......@@ -8,10 +8,11 @@
<van-icon v-if="editing" name="success" color="#fff" @click="edCard()" />
</template>
</van-nav-bar>
<div class="wrapper">
<div class="add-card" @click="toBindCard()" v-if="!is_bind">
<van-icon name="plus" />
<span>{{ $t('mine.addpaymentcard') }}</span>
<van-icon size="20px" name="plus" />
<span style="font-size: 18px;">{{ $t('mine.addpaymentcard') }}</span>
</div>
<div class="bank" v-else>
<div class="bank-cell">
......@@ -282,7 +283,7 @@ export default {
font-size: 3vw;
padding: 0vw 1vw;
background: #fff;
margin: 4vw 0 0 0;
margin: 10px 0 0 0;
span {
margin-right: 5px;
......@@ -292,4 +293,28 @@ export default {
// background-color: red;
}
}
@media (hover: hover) and (pointer: fine) {
.wrapper .add-card {
display: flex;
align-items: center;
justify-content: center;
color: #c24491;
background-color: #fff;
}
.wrapper .add-card span {
margin-left: 10px;
font-size: 18px;
}
.van-cell {
font-size: 16px;
line-height: 40px;
}
}
</style>
......@@ -5,19 +5,20 @@
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
<template #right>
<span class="nav-right" @click="save()">{{
<span style="font-size: 16px;" class="nav-right" @click="save()">{{
$t('common.save')
}}</span>
</template>
</van-nav-bar>
<van-cell-group>
<van-field
style="font-size: 16px;"
v-model="name"
:label="$t('mine.Name')"
:placeholder="$t('mine.pleaseenteryourrealname')"
/>
</van-cell-group>
<p>{{ $t('mine.changeralnametip') }}</p>
<p style="font-size: 14px;">{{ $t('mine.changeralnametip') }}</p>
</div>
</template>
......
......@@ -8,10 +8,10 @@
<div class="sex">
<van-radio-group v-model="radio">
<div class="item van-hairline--bottom" @click="chooesSex(1)">
<van-radio name="1">{{ $t('mine.male') }}</van-radio>
<van-radio icon-size="20px" style="font-size: 16px;" name="1">{{ $t('mine.male') }}</van-radio>
</div>
<div class="item van-hairline--bottom" @click="chooesSex(2)">
<van-radio name="2">{{ $t('mine.female') }}</van-radio>
<van-radio icon-size="20px" style="font-size: 16px;" name="2">{{ $t('mine.female') }}</van-radio>
</div>
</van-radio-group>
</div>
......
......@@ -7,18 +7,18 @@
</van-nav-bar>
<div class="items">
<div class="item van-hairline--bottom" @click="toInfomation()">
<div class="left">{{ $t("mine.Basicinformation") }}</div>
<van-icon name="arrow" />
<div style="font-size: 16px;" class="left">{{ $t("mine.Basicinformation") }}</div>
<van-icon size="20px" name="arrow" />
</div>
<div class="item van-hairline--bottom" @click="toLoginPassword()">
<div class="left">{{ $t("mine.loginpassword") }}</div>
<van-icon name="arrow" />
<div style="font-size: 16px;" class="left">{{ $t("mine.loginpassword") }}</div>
<van-icon size="20px" name="arrow" />
</div>
<div class="item van-hairline--bottom" @click="toPayPassword()">
<div class="left">{{ $t("mine.fundpassword") }}</div>
<div style="font-size: 16px;" class="left">{{ $t("mine.fundpassword") }}</div>
<div class="right">
<span class="desc">{{ this.userInfo.paypassword }}</span>
<van-icon name="arrow" />
<span style="font-size: 16px;" class="desc">{{ this.userInfo.paypassword }}</span>
<van-icon size="20px" name="arrow" />
</div>
</div>
</div>
......@@ -27,6 +27,7 @@
type="primary"
size="normal"
@click="loginout()"
style="font-size: 16px;"
>{{ $t("common.logout") }}</van-button
>
</div>
......
......@@ -31,21 +31,22 @@
</div>
</div>
</div>
<!-- -->
<div class="content">
<div class="finance">
</div>
<div v-if="this.userInfo.money" class="wallet">
<div class="part-1 van-hairline--bottom">
<p class="flex-1 font-28 font-primary-color">
<p style="font-size: 20px;" class="flex-1 font-28 font-primary-color">
{{ $t("mine.Mypurse") }}
</p>
<span class="font-28 font-gray" style="display: none">{{
<span class="font-28 font-gray" style="display: none;font-size: 20px;">{{
$t("common.Details")
}}</span>
<van-icon class="font-gray" style="font-size: 28px; display: none" name="arrow" />
</div>
<div class="part-2">
<p class="balance van-ellipsis">
<p style="font-size: 20px;" class="balance van-ellipsis">
€{{ this.userInfo.money }}
</p>
<div class="refresh-btn" @click="refresh()">
......@@ -101,7 +102,8 @@
<span class="menu-item-label">{{ $t("mine.setup") }}</span>
</div>
<div class="menu-item" @click="$router.push({ path: '/Personalreport' })">
<!-- <div class="menu-item" @click="$router.push({ path: '/Personalreport' })"> -->
<div class="menu-item" @click="openMyChat">
<van-image class="menu-item-icon" src="img/mine/kefu.png">
<template v-slot:loading>
<van-loading type="spinner" />
......@@ -142,6 +144,7 @@
<script>
import { languageList } from '@/lang';
import { openChat } from '@/utils/chat';
import emitter from '@/utils/emitter'
export default {
data() {
......@@ -337,6 +340,9 @@ export default {
emitter.emit('token-update');
this.$router.push({ path: "/Login" });
},
openMyChat(){
openChat()
}
},
created() {
if (localStorage.getItem("token")) {
......@@ -454,6 +460,7 @@ export default {
margin-top: 60px;
}
::v-deep .van-loading__spinner {
height: 50px;
width: 50px;
......@@ -681,16 +688,6 @@ export default {
}
.mine .wrapper .content .wallet .part-2 .refresh-btn {
/* margin-left: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
font-size: 30px;
border-radius: 50%;
color: #ffffff;
background-color: #e6c3a1; */
margin-top: 0px;
img {
......@@ -712,9 +709,65 @@ export default {
text-align: center;
}
@media (hover: hover) and (pointer: fine) {
.mine .user_img {
height: 60px;
width: 60px;
margin-top: 20px;
}
.mine .header {
background: @primary-bg;
background-size: cover;
padding-bottom: 20px;
height: 300px;
}
.mine .wrapper .content .menu .menu-item {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
width: 33%;
height: 90px;
margin-bottom: 10px;
margin-top: 10px;
// background-color: red;
}
.mine .wrapper .content .menu .menu-item .menu-item-icon {
/* margin: 25px; */
margin: 20px;
width: 30px;
height: 30px;
-o-object-fit: contain;
object-fit: contain;
}
.mine .wrapper .content .menu .menu-item .menu-item-label {
color: #432788;
font-size: 14px;
font-weight: 500;
text-align: center;
}
.exit {
margin-top: 20px;
width: 80%;
margin-left: auto;
margin-right: auto;
height: 60px;
font-size: 20px;
color: #fff;
background: @primary-bg;
// line-height: 100px;
border-radius: 50px;
text-align: center;
}
}
</style>
<style lang="scss" scoped>
<style lang="less" scoped>
.check-in-box {
width: 90%;
......@@ -782,4 +835,82 @@ export default {
}
}
}
@media (hover: hover) and (pointer: fine) {
.check-in-box {
// width: 90%;
max-width: 400px;
// margin-left: calc(50% - 805px);
// position: fixed;
::v-deep .van-popup__close-icon {
font-size: 20px;
}
}
.check-in-wrap {
padding: 16px;
.title {
padding: 20px 0;
font-size: 18px;
font-weight: 500;
text-align: center;
margin-top: 20px;
}
.content {
padding: 15px 10px;
// padding-top: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
.van-calendar {
background-color: transparent;
::v-deep .van-calendar__header {
box-shadow: none;
}
::v-deep .van-calendar__weekday {
font-size: 12px;
}
::v-deep .van-calendar__month-title {
height: auto;
// padding: 20px 0;
font-size: 16px;
}
::v-deep .van-calendar__day {
font-size: 14px;
height: 40px;
}
}
}
.tips {
margin-top: 20px;
h3 {
padding: 0;
margin: 0;
font-size: 14px;
font-weight: 500;
}
p {
padding: 0;
margin: 5px 0;
font-size: 14px;
}
}
}
}
</style>
......@@ -132,6 +132,11 @@ const routes = [
path: '/userDetail',
name: 'userDetail',
component: () => import('../pages/home/personDetail.vue')
},
{
path: '/imgShow',
name: 'imgShow',
component: () => import('../pages/home/imgShow.vue')
}
];
......
export function openChat() {
if (window.Tawk_API.showWidget) window.Tawk_API.showWidget();
if (window.Tawk_API.maximize) window.Tawk_API.maximize();
}
\ No newline at end of file
......@@ -114,7 +114,8 @@ service.interceptors.response.use(
let resData = data
resData.data = JSON.parse(Base64.decode(data.data));
// console.log('response:',resData)
console.log('response:',resData)
// console.log('ccccc========>',response.config.url+'========'+resData.data)
if (!resData) return
// const userStore = useUserStore()
if (resData.code === 1000 || resData.code === 200) {
......
......@@ -54,11 +54,8 @@ export const isEmpty = (obj) => {
}
}
export const nowLocationUrl = "http://172.93.218.201:1516"
export const nowLocationUrl = window.location.origin
// export const nowLocationUrl = "http://172.93.218.201:1517"
export const fullImgUrl=(imgUrl) => {
if(imgUrl){
return nowLocationUrl + imgUrl
}
}
\ No newline at end of file
......@@ -41,6 +41,12 @@ module.exports = {
args[0].title = "Titelseite";
return args;
});
// 只在生产环境关,开发环境不动
if (process.env.NODE_ENV === 'production') {
// Vue CLI 内置的 CSS 压缩插件名就是 'optimize-css'
config.plugins.delete('optimize-css') // 关闭 cssnano 压缩
}
},
devServer: {
// host: "localhost",
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论