Skip to content

G
german_mihuanggame
提交 b6f574b8 authored 作者: xiaotuoluo's avatar xiaotuoluo
浏览文件
操作

666

上级 516f1c57
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 474 行增加 和 31 行删除
src/api/contract.js
浏览文件 @ b6f574b8
...@@ -49,10 +49,53 @@ export function getContractTimer(data) { ...@@ -49,10 +49,53 @@ export function getContractTimer(data) {
} }
//获取市场交易对 //获取市场交易对
export function getallcoin () { export function getallcoin (params) {
return request({ return request({
url: '/Ajaxtrade/getallcoin', url: '/Ajaxtrade/getallcoin',
method: 'get', method: 'get',
params
})
}
//轮播图========== is_index=1首页轮播 is_index=0 hotel轮播
export function lunbo (params) {
return request({
url: '/system/bannerslist',
method: 'get',
params
})
}
//选妃列表
export function xuanfeiList (params) {
return request({
url: '/xuanfei/xuanfeilist',
method: 'get',
params
})
}
//选妃详情, api/xuanfei/xuanfeidata?id=5
export function xuanfeiDetail (params) {
return request({
url: '/xuanfei/xuanfeidata',
method: 'get',
params
})
}
//酒店列表
export function jiudianList () {
return request({
url: '/hotel/hotellist',
method:'get',
})
}
//酒店详情, api/hotel/hoteldata?id=5
export function jiudianDetail (params){
return request({
url: '/hotel/hoteldata',
method:'get',
params
}) })
} }
......
src/assets/css/base.less
浏览文件 @ b6f574b8
...@@ -70,3 +70,5 @@ ...@@ -70,3 +70,5 @@
@primary-bg:linear-gradient(90deg, #9695F9 0%, #7EB3ED 100%); @primary-bg:linear-gradient(90deg, #9695F9 0%, #7EB3ED 100%);
@primary-color:#72B3FF; @primary-color:#72B3FF;
@nav-bar-title-text-color:#fff;
src/assets/pet.png 0 → 100644
浏览文件 @ b6f574b8
差异被折叠。
src/assets/renzheng.png 0 → 100644
浏览文件 @ b6f574b8
差异被折叠。
src/assets/wifi.png 0 → 100644
浏览文件 @ b6f574b8
差异被折叠。
src/pages/guide/detail.vue
浏览文件 @ b6f574b8
<template> <template>
<div> <div style="padding: 16px;">
<h2 class="text-lg font-bold mb-2">Leaflet 地图示例</h2>
<!-- <div id="map" class="w-full h-96"></div> --> <van-nav-bar class="nav-bar" title="Detail" fixed>
<template #left>
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
</van-nav-bar>
<!-- <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;" >
<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>
</van-swipe>
<div style="display: flex;flex-direction: column;">
<span class="title">introduce</span>
<span class="content">{{ hotelDetail.introduce }}</span>
</div>
<div class="title">Amenities</div>
<div style="display: flex; flex-direction: row;justify-content: space-between;">
<div style="display: flex;flex-direction: row;align-items: center;">
<img :src="petImg" style="width: 20px;" alt="">
<span class="content">Pets Allowed</span>
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<img :src="wifiImg" style="width: 20px;" alt="">
<span class="content">Wireless Internet</span>
</div>
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<img :src="renzheng" style="width: 20px;" alt="">
<span class="content">Sustainablity Certification</span>
</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="title">Sustainability Certification</div>
<div class="content">Our hotel has a third-party sustainability certification</div>
<div class="title">Certification GreenSign</div>
<h2 class="title">Hotel Location</h2>
<div id="map" style="width: 100%; height: 200px;"></div> <div id="map" style="width: 100%; height: 200px;"></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="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> </div>
</template> </template>
<script> <script>
import L from 'leaflet' import L from 'leaflet'
import 'leaflet/dist/leaflet.css' 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', name: 'LeafletMap',
...@@ -17,20 +77,30 @@ ...@@ -17,20 +77,30 @@
return { return {
map: null, map: null,
marker: null, marker: null,
// hotelList:[],
bannarsImg: [],
hotelDetail:{},
wd:0,
jd:0,
address:'',
pl:[],
petImg:petImg,
renzheng:renzheng,
wifiImg:wifiImg
} }
}, },
mounted() { mounted() {
this.initMap() const id = this.$route.query.id
console.log('这个ID是：',id)
// this.initMap()
this.getJiuDianDetail(id)
}, },
methods: { methods: {
initMap() { initMap() {
// 固定位置坐标（例如成都锦里） // 固定位置坐标（例如成都锦里）
const location = [1.305611, 103.860150] const location = [this.wd,this.jd]
// 初始化地图 // 初始化地图
this.map = L.map('map').setView(location, 15) // 15 是缩放级别 this.map = L.map('map').setView(location, 15) // 15 是缩放级别
// 添加 OpenStreetMap 图层 // 添加 OpenStreetMap 图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '' attribution: ''
...@@ -41,10 +111,37 @@ ...@@ -41,10 +111,37 @@
// 添加 Marker // 添加 Marker
this.marker = L.marker(location) this.marker = L.marker(location)
.addTo(this.map) .addTo(this.map)
.bindPopup('成都锦里') .bindPopup(this.address)
.openPopup() .openPopup()
},
back(){
this.$router.back()
},
async getJiuDianDetail(id) {
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
this.wd = res.data.wd
this.jd = res.data.jd
this.pl = res.data.pl
this.initMap()
} }
} console.log('酒店详情：',res.data)
},
fullUrl1 (p) {
if (!p) return ''
return nowLocationUrl + p
},
},
created(){
},
} }
</script> </script>
...@@ -53,5 +150,49 @@ ...@@ -53,5 +150,49 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.masonry-wrap{
padding: 8px; /* 外层留白，像截图那样 */
background: #f3f4f6; /* 可选的浅灰背景 */
border-radius: 12px;
}
/* 关键：多列布局 */
.masonry{
column-gap: 12px; /* 列间距 ≈ 截图中的水平间隙 */
column-count: 2; /* 固定两列；也可做响应式 */
}
/* 让每个卡片在列中独立排布且不被拆分 */
.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);
}
.masonry-item img{
display: block;
width: 100%;
height: auto; /* 让高度随比例变化 */
object-fit: cover; /* 如果想更“紧致”，保留 */
}
.title{
font-size: 32px;
margin-top: 40px;
margin-bottom: 5px;
/* font-weight: bold; */
}
.content{
font-size: 28px;
line-height: 40px;
color: #6c6c6c;
margin-top: 10px;
}
</style> </style>
\ No newline at end of file
src/pages/guide/index3.vue
浏览文件 @ b6f574b8
...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
</div> </div>
</div> </div>
<div style="position: relative; margin-top:50px;"> <div v-if="images && images.length" style="position: relative; margin-top:50px;">
<!-- 轮播 --> <!-- 轮播 -->
<van-swipe autoplay="3000" style="height:200px;"> <van-swipe :autoplay="3000" style="height:200px;">
<van-swipe-item v-for="(img, index) in images" :key="index"> <van-swipe-item v-for="(item, index) in images" :key="index">
<img :src="img" style="width:100%; height:200px; object-fit:cover;" /> <img :src="fullUrl1(item.url)" style="width:100%; height:200px; object-fit:cover;" />
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
...@@ -40,8 +40,15 @@ ...@@ -40,8 +40,15 @@
</div> </div>
</div> </div>
<div style="margin-top: 5px;" class="masonry-wrap">
<div class="masonry">
<div v-for="(item, i) in hotelList" :key="i" class="masonry-item">
<img @click="tapImgItem(item)" :src="fullUrl(item.img_url)" alt="" loading="lazy">
</div>
</div>
</div>
<div data-v-3b3fbaa9="" class="shuadanBtm"> <!-- <div data-v-3b3fbaa9="" class="shuadanBtm">
<div data-v-3b3fbaa9="">Beliebte Hotels</div> <div data-v-3b3fbaa9="">Beliebte Hotels</div>
<div data-v-3b3fbaa9="" class="Rechargelist"> <div data-v-3b3fbaa9="" class="Rechargelist">
<div data-v-3b3fbaa9="" class="item"> <div data-v-3b3fbaa9="" class="item">
...@@ -52,11 +59,11 @@ ...@@ -52,11 +59,11 @@
src="https://admin.xianyuxx.motorcycles/upload/f321d377807a32cc/afe421ea052bda7a.jpg" src="https://admin.xianyuxx.motorcycles/upload/f321d377807a32cc/afe421ea052bda7a.jpg"
alt=""><img data-v-3b3fbaa9="" alt=""><img data-v-3b3fbaa9=""
src="https://admin.xianyuxx.motorcycles/upload/d03479d2a6f1d6b9/90cb2339ccbbc472.jpg" src="https://admin.xianyuxx.motorcycles/upload/d03479d2a6f1d6b9/90cb2339ccbbc472.jpg"
alt=""></div><!----> alt=""></div>
</div> </div>
</div> </div>
<div data-v-3b3fbaa9="" class="item"> <div data-v-3b3fbaa9="" class="item">
<div data-v-3b3fbaa9=""><!----> <div data-v-3b3fbaa9="">
<div data-v-3b3fbaa9=""><img data-v-3b3fbaa9="" <div data-v-3b3fbaa9=""><img data-v-3b3fbaa9=""
src="https://admin.xianyuxx.motorcycles/upload/3d7a69fe5611cdfd/0ee85052ab9292bb.jpg" src="https://admin.xianyuxx.motorcycles/upload/3d7a69fe5611cdfd/0ee85052ab9292bb.jpg"
alt=""><img data-v-3b3fbaa9="" alt=""><img data-v-3b3fbaa9=""
...@@ -74,11 +81,11 @@ ...@@ -74,11 +81,11 @@
src="https://admin.xianyuxx.motorcycles/upload/341c65ef164da91a/a60b3e27ddb76eab.jpg" src="https://admin.xianyuxx.motorcycles/upload/341c65ef164da91a/a60b3e27ddb76eab.jpg"
alt=""><img data-v-3b3fbaa9="" alt=""><img data-v-3b3fbaa9=""
src="https://admin.xianyuxx.motorcycles/upload/2d6632edb4ed8d44/2beb2f51f208ba2e.jpg" src="https://admin.xianyuxx.motorcycles/upload/2d6632edb4ed8d44/2beb2f51f208ba2e.jpg"
alt=""></div><!----> alt=""></div>
</div> </div>
</div> </div>
<div data-v-3b3fbaa9="" class="item"> <div data-v-3b3fbaa9="" class="item">
<div data-v-3b3fbaa9=""><!----> <div data-v-3b3fbaa9="">
<div data-v-3b3fbaa9=""><img data-v-3b3fbaa9="" <div data-v-3b3fbaa9=""><img data-v-3b3fbaa9=""
src="https://admin.xianyuxx.motorcycles/upload/1a9ee841c0f72a58/6df9b280af685b13.jpg" src="https://admin.xianyuxx.motorcycles/upload/1a9ee841c0f72a58/6df9b280af685b13.jpg"
alt=""><img data-v-3b3fbaa9="" alt=""><img data-v-3b3fbaa9=""
...@@ -89,7 +96,7 @@ ...@@ -89,7 +96,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
<div style="height:80px;"></div> <div style="height:80px;"></div>
...@@ -97,26 +104,69 @@ ...@@ -97,26 +104,69 @@
</template> </template>
<script> <script>
import { jiudianList,lunbo } from '@/api/contract'
import { nowLocationUrl } from '@/utils/tools'
// import Footer from '@/components/footer'; // import Footer from '@/components/footer';
export default { export default {
data() { data() {
return { return {
images: [ images: [
"https://admin.xianyuxx.motorcycles/upload/b41e05aba2905e8d/76900ad9488ebe24.jpg", // {img_url:"http://172.93.218.201:1516/xuanfei/20250919/34b09bbc286ac454b68e8a9646d45466.jpg"},
"https://admin.xianyuxx.motorcycles/upload/f321d377807a32cc/afe421ea052bda7a.jpg", // {img_url:"http://172.93.218.201:1516/xuanfei/20250919/b2f03af4011ce4e5bdaca814eda4e52b.jpg"}
"https://admin.xianyuxx.motorcycles/upload/d03479d2a6f1d6b9/90cb2339ccbbc472.jpg" ],
] hotelList: [],
origin: '',
origin1: '',
swipeKey: 0,
} }
}, },
/** /**
* *
*/ */
methods:{ methods: {
nima(){ // nima() {
this.$router.push({path:"/detail"}) // this.$router.push({ path: "/detail" })
// },
async getLunBoHotel(){
const res = await lunbo({ is_index: 0 })
if (res.code === 200) {
this.images = Array.isArray(res.data) ? res.data : (res.data?.list || [])
} }
console.log('酒店轮播图：',res.data)
},
async getJiuDianList() {
const res = await jiudianList()
if(res.code == 200){
this.hotelList = res.data
}
console.log('输出的酒店列表：',res)
},
fullUrl (p) {
if (!p) return ''
// 自动处理前导/结尾斜杠、相对/绝对路径
try { return new URL(p, this.origin).href }
catch (e) {
const a = (this.origin || '').replace(/\/+$/, '')
const b = String(p).replace(/^\/+/, '')
return a && b ? `${a}/${b}` : (b || a)
}
},
fullUrl1 (p) {
if (!p) return ''
return nowLocationUrl + p
},
tapImgItem(item){
this.$router.push({ path: "/detail",query: { id: String(item.id) } },)
} }
},
mounted() {
this.origin = window.location.origin
this.origin1 = window.location.origin
this.getLunBoHotel()
this.getJiuDianList()
},
} }
</script> </script>
...@@ -181,4 +231,35 @@ export default { ...@@ -181,4 +231,35 @@ export default {
width: 49%; width: 49%;
height: 56vw height: 56vw
} }
.masonry-wrap{
padding: 8px; /* 外层留白，像截图那样 */
background: #f3f4f6; /* 可选的浅灰背景 */
border-radius: 12px;
}
/* 关键：多列布局 */
.masonry{
column-gap: 12px; /* 列间距 ≈ 截图中的水平间隙 */
column-count: 2; /* 固定两列；也可做响应式 */
}
/* 让每个卡片在列中独立排布且不被拆分 */
.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);
}
.masonry-item img{
display: block;
width: 100%;
height: auto; /* 让高度随比例变化 */
object-fit: cover; /* 如果想更“紧致”，保留 */
}
</style> </style>
src/pages/home/home.vue
浏览文件 @ b6f574b8
差异被折叠。
src/pages/home/personDetail.vue 0 → 100644
浏览文件 @ b6f574b8
<template>
<div class="detailContainer">
<van-nav-bar class="nav-bar" title="Detail" fixed>
<template #left>
<van-icon name="arrow-left" color="#fff" @click="back()" />
</template>
</van-nav-bar>
<div class="headerView" style="margin-top: 54px;">
<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 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="">
</div>
<span style="font-size: 14px;margin-top: 5px;">Residence:{{personData?.address}}</span>
</div>
<div style="display: flex;flex-direction: column;align-items: end;justify-content: center;">
<div style="display: flex;align-items: center;flex-direction: column;">
<img style="width: 50px;" :src="zanHeart" alt="">
<span>{{personData?.like}}</span>
</div>
<div style="padding: 10px;background-color: #000;
color: #fff;font-size: 15px;margin-top: 25px;border-radius: 100px;">Reserve now</div>
</div>
</div>
<!-- 111111 -->
<div style="background-color: lightgray;height: 10px;width: 100%;
margin-top: 15px;margin-bottom: 15px;border-radius: 3px;">
</div>
<div class="middleImg">
<div @click="tapImg(index)" :style="{border:nowImgIndex == index ? '#000 5px solid':'' }" v-for="(value,index) in imgUrls" class="grid-item" :key="index">
<img style="width: 200px; height: 200px;border-radius: 10px;" :src="fullImgUrl(value)" alt="">
<!-- <div class="gridItemTag">
<span class="textTag">Yes</span>
</div> -->
</div>
</div>
<!-- 222222 -->
<div style="margin-top: 15px;">
<img :src="fullImgUrl(nowImgSrc)" style="width: 100%;" alt="">
</div>
<!-- 333333 -->
<div style="margin-top: 15px;">
<div style="font-size: 18px;font-weight: bold;">Personal profile</div>
<div style="font-size: 15px;margin-top: 8px;line-height: 18px;">{{personData.introduce}}</div>
</div>
</div>
</template>
<script>
import starImg from '@/assets/stars.jpg'
import zanHeart from '@/assets/zanheart.png'
import img1 from '@/assets/user/1.jpg'
import img2 from '@/assets/user/2.jpg'
import img3 from '@/assets/user/3.jpg'
import img4 from '@/assets/user/4.jpg'
import img5 from '@/assets/user/5.jpg'
import { xuanfeiDetail } from '@/api/contract'
import { nowLocationUrl } from '@/utils/tools'
export default{
data(){
return {
starImg: starImg,
zanHeart: zanHeart,
gridItems: [
{ src: img1 },
{ src: img2 },
{ src: img3 },
{ src: img4 },
{ src: img5 },
],
nowImgSrc: '',
nowImgIndex: 0,
personData:{},
imgUrls:[],
}
},
mounted() {
const id = this.$route.query.id
this.getPersonDetail(id)
},
methods: {
back(){
this.$router.back()
},
tapImg(index){
this.nowImgIndex = index
this.nowImgSrc = this.imgUrls[index]
},
async getPersonDetail(id){
const res = await xuanfeiDetail({id:id})
if(res.code == 200){
this.personData = res.data
this.imgUrls = res.data.img_url || []
this.nowImgSrc = res.data.img_url[0]
}
// console.log('个人详情：',res)
},
fullImgUrl(imgUrl){
return nowLocationUrl + imgUrl
}
}
}
</script>
<style scoped>
.detailContainer{
padding:15px 25px 15px 25px;
}
.headerView{
/* margin-top: 100px; */
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.tag{
background-color: #000;
border-radius: 8px;
padding: 8px 15px 8px 15px;
color: #fff;
font-size: 26px;
max-width: 300px;
}
.middleImg{
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(1,200px);
grid-auto-columns: 200px;
gap: 20px;
overflow-x: auto;
padding: 10px;
}
.grid-item {
background-color: #4ade80;
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* X偏移 Y偏移 模糊 半透明黑色 */
}
</style>
\ No newline at end of file
src/router/index.js
浏览文件 @ b6f574b8
...@@ -128,7 +128,11 @@ const routes = [ ...@@ -128,7 +128,11 @@ const routes = [
name: 'detail', name: 'detail',
component: () => import('../pages/guide/detail.vue') component: () => import('../pages/guide/detail.vue')
}, },
{
path: '/userDetail',
name: 'userDetail',
component: () => import('../pages/home/personDetail.vue')
}
]; ];
......
src/utils/request.js
浏览文件 @ b6f574b8
...@@ -109,7 +109,7 @@ if (localStorage.getItem("token")) { ...@@ -109,7 +109,7 @@ if (localStorage.getItem("token")) {
service.interceptors.response.use( service.interceptors.response.use(
async (response) => { async (response) => {
// console.log('ccccc========>',response) console.log('ccccc========>',response.config.url)
const { data } = response const { data } = response
let resData = data let resData = data
......
src/utils/tools.js
浏览文件 @ b6f574b8
...@@ -53,3 +53,12 @@ export const isEmpty = (obj) => { ...@@ -53,3 +53,12 @@ export const isEmpty = (obj) => {
return require(`@/assets/${url}`) return require(`@/assets/${url}`)
} }
} }
export const nowLocationUrl = "http://172.93.218.201:1516"
export const fullImgUrl=(imgUrl) => {
if(imgUrl){
return nowLocationUrl + imgUrl
}
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论