|
@@ -1,528 +1,599 @@
|
|
<template>
|
|
<template>
|
|
- <view class="main-land-container">
|
|
|
|
-<!-- <view class="scroll-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" >
|
|
|
|
|
|
+ <view class="main-land-container">
|
|
|
|
+ <!-- <view class="scroll-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" >
|
|
<view class="background" :style="{ transform: `translateX(${translateX}px)` }">
|
|
<view class="background" :style="{ transform: `translateX(${translateX}px)` }">
|
|
<image class="island-image" src="/static/island/island.png" mode="heightFix"></image>
|
|
<image class="island-image" src="/static/island/island.png" mode="heightFix"></image>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view> -->
|
|
|
|
|
|
-
|
|
|
|
- <!-- 第三层:背景 -->
|
|
|
|
- <view class="background-layer"></view>
|
|
|
|
-
|
|
|
|
- <!-- 第二层:地图 -->
|
|
|
|
- <view class="map-layer" id="mapLayer" :style="{ transform: `translateX(${translateX}px)` }" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @mousedown="onmousedown" @mousemove="onmousemove" @mouseup="onmouseup">
|
|
|
|
- <!-- 这里可以放置地图元素(示例:一个方块) -->
|
|
|
|
- <!-- <view style="position: absolute; top: 30%; left: 30%; width: 100px; height: 100px; background: green;"></view> -->
|
|
|
|
- <image class="island-image" src="/static/island/mainLand.png" mode="widthFix" style="width:2048rpx; bottom: 0rpx;left: 0rpx; position: absolute;"></image>
|
|
|
|
- <!-- <view style="position: absolute;width: 300rpx;left: 280rpx; bottom:230rpx;align-items: center;">
|
|
|
|
- <image class="house-image" src="/static/island/building/4.png" mode="widthFix" style="width:300rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData"> </image>
|
|
|
|
- </view> -->
|
|
|
|
-
|
|
|
|
- <view style="position: absolute;width: 360rpx;left:782rpx; bottom:385rpx;align-items: center;">
|
|
|
|
- <image class="farm-image" src="/static/island/building/3.png" mode="widthFix" style="width:360rpx; position: static;" @click="onFarmClick" :animation="farmAnimationData"> </image>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view style="position: absolute;width: 360rpx;left: 335rpx; bottom:835rpx;align-items: center;">
|
|
|
|
- <image class="mine-image" src="/static/island/building/4.png" mode="widthFix" style="width:360rpx; position: static;"> </image>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view style="position: absolute;width: 360rpx;left: 782rpx; bottom:720rpx;align-items: center;">
|
|
|
|
- <image class="hall-image" src="/static/island/building/5.png" mode="widthFix" style="width:360rpx; position: static;"> </image>
|
|
|
|
- </view>
|
|
|
|
|
|
|
|
- <view style="position: absolute;width: 360rpx;left: 248rpx; bottom:488rpx;align-items: center;">
|
|
|
|
- <image class="wood-image" src="/static/island/building/6.png" mode="widthFix" style="width:360rpx; position: static;"> </image>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <!-- 第三层:背景 -->
|
|
|
|
+ <view class="background-layer"></view>
|
|
|
|
|
|
- <view style="position: absolute;width: 360rpx;left: 910rpx; bottom:108rpx;align-items: center;">
|
|
|
|
- <image class="shop-image" src="/static/island/building/2.png" mode="widthFix" style="width:360rpx; position: static;" @click="onShopClick" :animation="shopAnimationData"> </image>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <!-- 第二层:地图 -->
|
|
|
|
+ <view class="map-layer" id="mapLayer" :style="{ transform: `translateX(${translateX}px)` }"
|
|
|
|
+ @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @mousedown="onmousedown"
|
|
|
|
+ @mousemove="onmousemove" @mouseup="onmouseup">
|
|
|
|
+ <!-- 这里可以放置地图元素(示例:一个方块) -->
|
|
|
|
+ <!-- <view style="position: absolute; top: 30%; left: 30%; width: 100px; height: 100px; background: green;"></view> -->
|
|
|
|
+ <image class="island-image" src="/static/island/mainLand.png" mode="widthFix"
|
|
|
|
+ style="width:2048rpx; bottom: 0rpx;left: 0rpx; position: absolute;"></image>
|
|
|
|
+ <!-- <view style="position: absolute;width: 300rpx;left: 280rpx; bottom:230rpx;align-items: center;">
|
|
|
|
+ <image class="house-image" src="/static/island/building/4.png" mode="widthFix" style="width:300rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData"> </image>
|
|
|
|
+ </view> -->
|
|
|
|
|
|
- <view style="position: absolute;width: 360rpx;left: 1498rpx; bottom:75rpx;align-items: center;">
|
|
|
|
- <image class="airport-image" src="/static/island/building/7.png" mode="widthFix" style="width:360rpx; position: static;"> </image>
|
|
|
|
|
|
+ <view style="position: absolute;width: 360rpx;left:782rpx; bottom:385rpx;align-items: center;">
|
|
|
|
+ <image class="farm-image" src="/static/island/building/3.png" mode="widthFix"
|
|
|
|
+ style="width:360rpx; position: static;" @click="onFarmClick" :animation="farmAnimationData">
|
|
|
|
+ </image>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view style="position: absolute;width: 360rpx;left: 335rpx; bottom:835rpx;align-items: center;">
|
|
|
|
+ <image class="mine-image" src="/static/island/building/4.png" mode="widthFix"
|
|
|
|
+ style="width:360rpx; position: static;"> </image>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view style="position: absolute;width: 360rpx;left: 782rpx; bottom:720rpx;align-items: center;">
|
|
|
|
+ <image class="hall-image" src="/static/island/building/5.png" mode="widthFix"
|
|
|
|
+ style="width:360rpx; position: static;"> </image>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view style="position: absolute;width: 360rpx;left: 248rpx; bottom:488rpx;align-items: center;">
|
|
|
|
+ <image class="wood-image" src="/static/island/building/6.png" mode="widthFix"
|
|
|
|
+ style="width:360rpx; position: static;"> </image>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view style="position: absolute;width: 360rpx;left: 910rpx; bottom:108rpx;align-items: center;">
|
|
|
|
+ <image class="shop-image" src="/static/island/building/2.png" mode="widthFix"
|
|
|
|
+ style="width:360rpx; position: static;" @click="onShopClick" :animation="shopAnimationData">
|
|
|
|
+ </image>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view style="position: absolute;width: 360rpx;left: 1498rpx; bottom:75rpx;align-items: center;">
|
|
|
|
+ <image class="airport-image" src="/static/island/building/7.png" mode="widthFix"
|
|
|
|
+ style="width:360rpx; position: static;"> </image>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view style="position: absolute;width: 360rpx;left: 1400rpx; bottom:380rpx;align-items: center;">
|
|
|
|
+ <image class="house-image" src="/static/island/building/1.png" mode="widthFix"
|
|
|
|
+ style="width:360rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData">
|
|
|
|
+ </image>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- 回家箭头 -->
|
|
|
|
+ <view class="home-arrow" @click="goHome" :animation="homeArrowAnimation"
|
|
|
|
+ :style="{ opacity: homeArrowVisible ? 1 : 0 }">
|
|
|
|
+ <!-- <image src="/static/island/home_arrow.png" mode="widthFix" style="width: 100rpx;"></image> -->
|
|
|
|
+ <view class="arrow"></view>
|
|
|
|
+ <text class="home-text">回家</text>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
- <view style="position: absolute;width: 360rpx;left: 1400rpx; bottom:380rpx;align-items: center;">
|
|
|
|
- <image class="house-image" src="/static/island/building/1.png" mode="widthFix" style="width:360rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData"> </image>
|
|
|
|
|
|
+ <!-- 第一层:UI -->
|
|
|
|
+ <view class="ui-layer">
|
|
|
|
+ <view class="ui-content">
|
|
|
|
+ <!-- 添加货币计数器 -->
|
|
|
|
+ <view class="currency-display">
|
|
|
|
+ <view class="currency-item">
|
|
|
|
+ <image src="/static/island/UI/wd_icon_coin.png" mode="widthFix" class="currency-icon"></image>
|
|
|
|
+ <text class="currency-value">{{userInfo.num_gmd}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="currency-item">
|
|
|
|
+ <image src="/static/island/UI/wd_icon_xingyuan.png" mode="widthFix" class="currency-icon">
|
|
|
|
+ </image>
|
|
|
|
+ <text class="currency-value">{{userInfo.num_gmg}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="ui-buttons">
|
|
|
|
+ <image src="/static/island/icon_backpack.png" mode="widthFix" style="width:100rpx"
|
|
|
|
+ @click="showInventory" class="ui-icon-button"></image>
|
|
|
|
+ <!-- <button class="ui-button" @click="showCharacter">角色</button>
|
|
|
|
+ <button class="ui-button" @click="showShop">商店</button> -->
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
- <!-- 回家箭头 -->
|
|
|
|
- <view class="home-arrow" @click="goHome" :animation="homeArrowAnimation" :style="{ opacity: homeArrowVisible ? 1 : 0 }">
|
|
|
|
- <!-- <image src="/static/island/home_arrow.png" mode="widthFix" style="width: 100rpx;"></image> -->
|
|
|
|
- <view class="arrow" ></view>
|
|
|
|
- <text class="home-text">回家</text>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <!-- 对话框组件 -->
|
|
|
|
+ <backpack-dialog :visible.sync="inventoryVisible" @close="onInventoryClose"></backpack-dialog>
|
|
|
|
+ <character-dialog :visible.sync="characterVisible" @close="onCharacterClose"></character-dialog>
|
|
|
|
+ <shop-dialog :visible.sync="shopVisible" :shopName="currentShopName" @close="onShopClose"
|
|
|
|
+ @buy="onShopBuy"></shop-dialog>
|
|
|
|
+ <hua-tian :visible.sync="huaTianVisible" @close="onHuaTianClose" ref="huaTian"></hua-tian>
|
|
|
|
+ <task-dialog :visible.sync="taskDialogVisible" @close="onTaskDialogClose"></task-dialog>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
- <!-- 第一层:UI -->
|
|
|
|
- <view class="ui-layer">
|
|
|
|
- <view class="ui-content">
|
|
|
|
- <!-- 添加货币计数器 -->
|
|
|
|
- <view class="currency-display" >
|
|
|
|
- <view class="currency-item">
|
|
|
|
- <image src="/static/island/UI/wd_icon_coin.png" mode="widthFix" class="currency-icon"></image>
|
|
|
|
- <text class="currency-value">9999</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="currency-item">
|
|
|
|
- <image src="/static/island/UI/wd_icon_xingyuan.png" mode="widthFix" class="currency-icon"></image>
|
|
|
|
- <text class="currency-value">9999</text>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="ui-buttons">
|
|
|
|
- <image src="/static/island/icon_backpack.png" mode="widthFix" style="width:100rpx" @click="showInventory" class="ui-icon-button"></image>
|
|
|
|
- <!-- <button class="ui-button" @click="showCharacter">角色</button>
|
|
|
|
- <button class="ui-button" @click="showShop">商店</button> -->
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <!-- 对话框组件 -->
|
|
|
|
- <backpack-dialog :visible.sync="inventoryVisible" @close="onInventoryClose"></backpack-dialog>
|
|
|
|
- <character-dialog :visible.sync="characterVisible" @close="onCharacterClose"></character-dialog>
|
|
|
|
- <shop-dialog :visible.sync="shopVisible" :shopName="currentShopName" @close="onShopClose" @buy="onShopBuy"></shop-dialog>
|
|
|
|
- <hua-tian :visible.sync="huaTianVisible" @close="onHuaTianClose" ref="huaTian"></hua-tian>
|
|
|
|
- <task-dialog :visible.sync="taskDialogVisible" @close="onTaskDialogClose"></task-dialog>
|
|
|
|
- </view>
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import BackpackDialog from '@/components/dialogs/BackpackDialog.vue'
|
|
|
|
-import CharacterDialog from '@/components/dialogs/CharacterDialog.vue'
|
|
|
|
-import ShopDialog from '@/components/dialogs/ShopDialog.vue'
|
|
|
|
-import HuaTian from './HuaTian.vue'
|
|
|
|
-import TaskDialog from './TaskDialog.vue'
|
|
|
|
-
|
|
|
|
-export default {
|
|
|
|
- components: {
|
|
|
|
- BackpackDialog,
|
|
|
|
- CharacterDialog,
|
|
|
|
- ShopDialog,
|
|
|
|
- HuaTian,
|
|
|
|
- TaskDialog
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- // // 背景位置控制
|
|
|
|
- translateX: -200,
|
|
|
|
- startX: 0,
|
|
|
|
- currentX: 0,
|
|
|
|
- isDragging : false,
|
|
|
|
- // maxTranslate: 0,
|
|
|
|
-
|
|
|
|
- // // 获取屏幕宽度和背景宽度
|
|
|
|
- screenWidth: 0,
|
|
|
|
- backgroundWidth: 0,
|
|
|
|
- islandHeight: 0,
|
|
|
|
- houseAnimationData: {},
|
|
|
|
- farmAnimationData: {},
|
|
|
|
- shopAnimationData: {},
|
|
|
|
- houseAnimating: false,
|
|
|
|
- farmAnimating: false,
|
|
|
|
- shopAnimating: false,
|
|
|
|
- baseTranslate: { x: -50, y: 50 },
|
|
|
|
- inventoryVisible: false,
|
|
|
|
- characterVisible: false,
|
|
|
|
- shopVisible: false,
|
|
|
|
- huaTianVisible: false,
|
|
|
|
- taskDialogVisible: false,
|
|
|
|
- homeArrowAnimation: {},
|
|
|
|
- homeArrowAnimating: false,
|
|
|
|
- homeArrowVisible: false,
|
|
|
|
- currentShopName: '商店',
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- onLoad() {
|
|
|
|
- let self = this;
|
|
|
|
- // 获取屏幕宽度
|
|
|
|
- uni.getSystemInfo({
|
|
|
|
- success: (res) => {
|
|
|
|
- self.screenWidth = res.windowWidth;
|
|
|
|
- console.log('屏幕宽度:', self.screenWidth);
|
|
|
|
|
|
+ import BackpackDialog from '@/components/dialogs/BackpackDialog.vue'
|
|
|
|
+ import CharacterDialog from '@/components/dialogs/CharacterDialog.vue'
|
|
|
|
+ import ShopDialog from '@/components/dialogs/ShopDialog.vue'
|
|
|
|
+ import HuaTian from './HuaTian.vue'
|
|
|
|
+ import TaskDialog from './TaskDialog.vue'
|
|
|
|
+
|
|
|
|
+ export default {
|
|
|
|
+ components: {
|
|
|
|
+ BackpackDialog,
|
|
|
|
+ CharacterDialog,
|
|
|
|
+ ShopDialog,
|
|
|
|
+ HuaTian,
|
|
|
|
+ TaskDialog
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ // // 背景位置控制
|
|
|
|
+ translateX: -200,
|
|
|
|
+ startX: 0,
|
|
|
|
+ currentX: 0,
|
|
|
|
+ isDragging: false,
|
|
|
|
+ // maxTranslate: 0,
|
|
|
|
+ userInfo: {
|
|
|
|
+ num_gmd: 0,
|
|
|
|
+ num_gmg: 0,
|
|
|
|
+ },
|
|
|
|
+ moneyTimer: null, // 添加定时器变量
|
|
|
|
+
|
|
|
|
+ // // 获取屏幕宽度和背景宽度
|
|
|
|
+ screenWidth: 0,
|
|
|
|
+ backgroundWidth: 0,
|
|
|
|
+ islandHeight: 0,
|
|
|
|
+ houseAnimationData: {},
|
|
|
|
+ farmAnimationData: {},
|
|
|
|
+ shopAnimationData: {},
|
|
|
|
+ houseAnimating: false,
|
|
|
|
+ farmAnimating: false,
|
|
|
|
+ shopAnimating: false,
|
|
|
|
+ baseTranslate: {
|
|
|
|
+ x: -50,
|
|
|
|
+ y: 50
|
|
|
|
+ },
|
|
|
|
+ inventoryVisible: false,
|
|
|
|
+ characterVisible: false,
|
|
|
|
+ shopVisible: false,
|
|
|
|
+ huaTianVisible: false,
|
|
|
|
+ taskDialogVisible: false,
|
|
|
|
+ homeArrowAnimation: {},
|
|
|
|
+ homeArrowAnimating: false,
|
|
|
|
+ homeArrowVisible: false,
|
|
|
|
+ currentShopName: '商店',
|
|
}
|
|
}
|
|
- });
|
|
|
|
- },
|
|
|
|
- onShow() {
|
|
|
|
- // this.loadData();
|
|
|
|
- },
|
|
|
|
- onReady() {
|
|
|
|
- // 在组件渲染完成后获取图片尺寸
|
|
|
|
- setTimeout(() => {
|
|
|
|
- this.getImageSize();
|
|
|
|
- // 延迟1秒后显示箭头并开始动画
|
|
|
|
- setTimeout(() => {
|
|
|
|
- this.homeArrowVisible = true;
|
|
|
|
- this.startHomeArrowAnimation();
|
|
|
|
- }, 1000);
|
|
|
|
- }, 300);
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- loadData() {
|
|
|
|
- // 可以在这里加载其他数据
|
|
|
|
},
|
|
},
|
|
- getImageSize() {
|
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
|
- query.select('.island-image').boundingClientRect(data => {
|
|
|
|
- if (data) {
|
|
|
|
- // 获取岛屿图片的宽度和高度
|
|
|
|
- this.backgroundWidth = data.width;
|
|
|
|
- this.islandHeight = data.height;
|
|
|
|
- // this.backgroundWidth = 1536;
|
|
|
|
- // this.islandHeight = 1024;
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- // 设置背景高度为岛屿高度的两倍(在CSS中实现)
|
|
|
|
-
|
|
|
|
- // 计算最大可移动距离
|
|
|
|
- this.maxTranslate = this.backgroundWidth - this.screenWidth;
|
|
|
|
-
|
|
|
|
- // 初始位置居中
|
|
|
|
- // this.translateX = -this.maxTranslate / 2;
|
|
|
|
-
|
|
|
|
- // 打印调试信息
|
|
|
|
- // console.log('屏幕宽度:', this.screenWidth);
|
|
|
|
- // console.log('背景宽度:', this.backgroundWidth);
|
|
|
|
- // console.log('岛屿高度:', this.islandHeight);
|
|
|
|
- // console.log('屏幕宽度:',this.screenWidth);
|
|
|
|
- // console.log('最大可移动距离:',this.maxTranslate);
|
|
|
|
-
|
|
|
|
- // console.log('岛屿data:', data);
|
|
|
|
-
|
|
|
|
- } else {
|
|
|
|
- console.error('未能获取岛屿图片的尺寸');
|
|
|
|
|
|
+ onLoad() {
|
|
|
|
+ let self = this;
|
|
|
|
+ // 获取屏幕宽度
|
|
|
|
+ uni.getSystemInfo({
|
|
|
|
+ success: (res) => {
|
|
|
|
+ self.screenWidth = res.windowWidth;
|
|
|
|
+ console.log('屏幕宽度:', self.screenWidth);
|
|
}
|
|
}
|
|
- }).exec();
|
|
|
|
- },
|
|
|
|
- // 触摸开始
|
|
|
|
- touchStart(e) {
|
|
|
|
- // console.log('----------- touchStart');
|
|
|
|
- this.startX = e.touches[0].clientX;
|
|
|
|
- this.currentX = this.translateX;
|
|
|
|
- console.log('this.startX =',this.startX);
|
|
|
|
- console.log('this.currentX =',this.currentX);
|
|
|
|
- },
|
|
|
|
- // 触摸移动
|
|
|
|
- touchMove(e) {
|
|
|
|
- console.log('----------- touchMove');
|
|
|
|
- const moveX = e.touches[0].clientX - this.startX;
|
|
|
|
- let newTranslateX = this.currentX + moveX;
|
|
|
|
-
|
|
|
|
- // 限制移动范围,不让背景两侧露出
|
|
|
|
- if (newTranslateX > 0) {
|
|
|
|
- newTranslateX = 0;
|
|
|
|
- } else if (newTranslateX < -this.maxTranslate) {
|
|
|
|
- newTranslateX = -this.maxTranslate;
|
|
|
|
- }
|
|
|
|
|
|
+ });
|
|
|
|
+ this.getUserMoney();
|
|
|
|
|
|
- this.translateX = newTranslateX;
|
|
|
|
- console.log('moveX =',moveX);
|
|
|
|
- console.log('this.translateX =',this.translateX);
|
|
|
|
|
|
+ // 启动定时器,每2秒更新一次铃钱
|
|
|
|
+ this.moneyTimer = setInterval(() => {
|
|
|
|
+ this.getUserMoney();
|
|
|
|
+ }, 2000);
|
|
|
|
+ },
|
|
|
|
+ onShow() {
|
|
|
|
+ // this.loadData();
|
|
},
|
|
},
|
|
- // 触摸结束
|
|
|
|
- touchEnd() {
|
|
|
|
- console.log('----------- touchEnd');
|
|
|
|
- this.currentX = this.translateX;
|
|
|
|
- console.log('this.currentX =',this.currentX);
|
|
|
|
|
|
+ onReady() {
|
|
|
|
+ // 在组件渲染完成后获取图片尺寸
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.getImageSize();
|
|
|
|
+ // 延迟1秒后显示箭头并开始动画
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.homeArrowVisible = true;
|
|
|
|
+ this.startHomeArrowAnimation();
|
|
|
|
+ }, 1000);
|
|
|
|
+ }, 300);
|
|
},
|
|
},
|
|
-
|
|
|
|
- onmousedown(e) {
|
|
|
|
- console.log('----------- onmousedown');
|
|
|
|
- console.log('----------- e',e);
|
|
|
|
- this.isDragging = true;
|
|
|
|
- this.startX = e.clientX;
|
|
|
|
- this.currentX = this.translateX;
|
|
|
|
- mapLayer.style.cursor = 'grabbing';
|
|
|
|
|
|
+ onUnload() {
|
|
|
|
+ // 清除定时器
|
|
|
|
+ if (this.moneyTimer) {
|
|
|
|
+ clearInterval(this.moneyTimer);
|
|
|
|
+ this.moneyTimer = null;
|
|
|
|
+ }
|
|
},
|
|
},
|
|
-
|
|
|
|
- onmousemove(e) {
|
|
|
|
- if(this.isDragging){
|
|
|
|
- console.log('----------- onmousemove');
|
|
|
|
- const moveX = e.clientX - this.startX;
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ loadData() {
|
|
|
|
+ // 可以在这里加载其他数据
|
|
|
|
+ },
|
|
|
|
+ getImageSize() {
|
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
|
+ query.select('.island-image').boundingClientRect(data => {
|
|
|
|
+ if (data) {
|
|
|
|
+ // 获取岛屿图片的宽度和高度
|
|
|
|
+ this.backgroundWidth = data.width;
|
|
|
|
+ this.islandHeight = data.height;
|
|
|
|
+ // this.backgroundWidth = 1536;
|
|
|
|
+ // this.islandHeight = 1024;
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ // 设置背景高度为岛屿高度的两倍(在CSS中实现)
|
|
|
|
+
|
|
|
|
+ // 计算最大可移动距离
|
|
|
|
+ this.maxTranslate = this.backgroundWidth - this.screenWidth;
|
|
|
|
+
|
|
|
|
+ // 初始位置居中
|
|
|
|
+ // this.translateX = -this.maxTranslate / 2;
|
|
|
|
+
|
|
|
|
+ // 打印调试信息
|
|
|
|
+ // console.log('屏幕宽度:', this.screenWidth);
|
|
|
|
+ // console.log('背景宽度:', this.backgroundWidth);
|
|
|
|
+ // console.log('岛屿高度:', this.islandHeight);
|
|
|
|
+ // console.log('屏幕宽度:',this.screenWidth);
|
|
|
|
+ // console.log('最大可移动距离:',this.maxTranslate);
|
|
|
|
+
|
|
|
|
+ // console.log('岛屿data:', data);
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ console.error('未能获取岛屿图片的尺寸');
|
|
|
|
+ }
|
|
|
|
+ }).exec();
|
|
|
|
+ },
|
|
|
|
+ // 触摸开始
|
|
|
|
+ touchStart(e) {
|
|
|
|
+ // console.log('----------- touchStart');
|
|
|
|
+ this.startX = e.touches[0].clientX;
|
|
|
|
+ this.currentX = this.translateX;
|
|
|
|
+ console.log('this.startX =', this.startX);
|
|
|
|
+ console.log('this.currentX =', this.currentX);
|
|
|
|
+ },
|
|
|
|
+ // 触摸移动
|
|
|
|
+ touchMove(e) {
|
|
|
|
+ console.log('----------- touchMove');
|
|
|
|
+ const moveX = e.touches[0].clientX - this.startX;
|
|
let newTranslateX = this.currentX + moveX;
|
|
let newTranslateX = this.currentX + moveX;
|
|
-
|
|
|
|
- //限制移动范围,不让背景两侧露出
|
|
|
|
|
|
+
|
|
|
|
+ // 限制移动范围,不让背景两侧露出
|
|
if (newTranslateX > 0) {
|
|
if (newTranslateX > 0) {
|
|
newTranslateX = 0;
|
|
newTranslateX = 0;
|
|
} else if (newTranslateX < -this.maxTranslate) {
|
|
} else if (newTranslateX < -this.maxTranslate) {
|
|
newTranslateX = -this.maxTranslate;
|
|
newTranslateX = -this.maxTranslate;
|
|
}
|
|
}
|
|
-
|
|
|
|
- this.translateX = newTranslateX;
|
|
|
|
- console.log('moveX =',moveX);
|
|
|
|
- console.log('this.translateX =',this.translateX);
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- onmouseup(e) {
|
|
|
|
- console.log('----------- onmouseup');
|
|
|
|
- this.isDragging = false;
|
|
|
|
- mapLayer.style.cursor = 'grab';
|
|
|
|
- },
|
|
|
|
|
|
|
|
- onHouseClick(event) {
|
|
|
|
- if(this.houseAnimating) return;
|
|
|
|
- // 处理点击事件
|
|
|
|
- console.log('house clicked!');
|
|
|
|
-
|
|
|
|
- // 播放房屋的点击动画
|
|
|
|
- this.playAnimation('house');
|
|
|
|
-
|
|
|
|
- // 设置商店名称为"房屋商店"
|
|
|
|
- this.currentShopName = '材料商店';
|
|
|
|
- this.shopVisible = true;
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- onFarmClick(event) {
|
|
|
|
- if(this.farmAnimating) return;
|
|
|
|
- // 处理点击事件
|
|
|
|
- console.log('farm clicked!111');
|
|
|
|
-
|
|
|
|
- // 播放大厅的点击动画
|
|
|
|
- this.playAnimation('farm');
|
|
|
|
-
|
|
|
|
- // 打开花田对话框
|
|
|
|
- this.huaTianVisible = true;
|
|
|
|
- // 将mainLand传递给HuaTian组件
|
|
|
|
- this.$refs.huaTian && this.$refs.huaTian.setMainLand(this);
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- onShopClick(event) {
|
|
|
|
- if(this.shopAnimating) return;
|
|
|
|
- // 处理点击事件
|
|
|
|
- console.log('shop clicked!');
|
|
|
|
-
|
|
|
|
- // 播放商店的点击动画
|
|
|
|
- this.playAnimation('shop');
|
|
|
|
-
|
|
|
|
- // 设置商店名称为"花店"
|
|
|
|
- this.currentShopName = '花店';
|
|
|
|
- // 打开商店对话框
|
|
|
|
- this.shopVisible = true;
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- playAnimation(type) {
|
|
|
|
- let self = this;
|
|
|
|
-
|
|
|
|
- // 根据类型设置对应的动画状态
|
|
|
|
- if (type === 'house') {
|
|
|
|
- this.houseAnimating = true;
|
|
|
|
- } else if (type === 'farm') {
|
|
|
|
- this.farmAnimating = true;
|
|
|
|
- } else if (type === 'shop') {
|
|
|
|
- this.shopAnimating = true;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- // 创建动画实例
|
|
|
|
- const animation = uni.createAnimation({
|
|
|
|
- duration: 400,
|
|
|
|
- timingFunction: 'ease',
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- // 定义果冻动画序列
|
|
|
|
- animation.scale(0.95).step({ duration: 100 })
|
|
|
|
- .scale(1.05).step({ duration: 100 })
|
|
|
|
- .scale(0.98).step({ duration: 100 })
|
|
|
|
- .scale(1).step({ duration: 100 });
|
|
|
|
-
|
|
|
|
- // 根据类型应用动画到对应的元素
|
|
|
|
- if (type === 'house') {
|
|
|
|
- this.houseAnimationData = animation.export();
|
|
|
|
- } else if (type === 'farm') {
|
|
|
|
- this.farmAnimationData = animation.export();
|
|
|
|
- } else if (type === 'shop') {
|
|
|
|
- this.shopAnimationData = animation.export();
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- // 动画结束后重置状态
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
|
+ this.translateX = newTranslateX;
|
|
|
|
+ console.log('moveX =', moveX);
|
|
|
|
+ console.log('this.translateX =', this.translateX);
|
|
|
|
+ },
|
|
|
|
+ // 触摸结束
|
|
|
|
+ touchEnd() {
|
|
|
|
+ console.log('----------- touchEnd');
|
|
|
|
+ this.currentX = this.translateX;
|
|
|
|
+ console.log('this.currentX =', this.currentX);
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ onmousedown(e) {
|
|
|
|
+ console.log('----------- onmousedown');
|
|
|
|
+ console.log('----------- e', e);
|
|
|
|
+ this.isDragging = true;
|
|
|
|
+ this.startX = e.clientX;
|
|
|
|
+ this.currentX = this.translateX;
|
|
|
|
+ mapLayer.style.cursor = 'grabbing';
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ onmousemove(e) {
|
|
|
|
+ if (this.isDragging) {
|
|
|
|
+ console.log('----------- onmousemove');
|
|
|
|
+ const moveX = e.clientX - this.startX;
|
|
|
|
+ let newTranslateX = this.currentX + moveX;
|
|
|
|
+
|
|
|
|
+ //限制移动范围,不让背景两侧露出
|
|
|
|
+ if (newTranslateX > 0) {
|
|
|
|
+ newTranslateX = 0;
|
|
|
|
+ } else if (newTranslateX < -this.maxTranslate) {
|
|
|
|
+ newTranslateX = -this.maxTranslate;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.translateX = newTranslateX;
|
|
|
|
+ console.log('moveX =', moveX);
|
|
|
|
+ console.log('this.translateX =', this.translateX);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ onmouseup(e) {
|
|
|
|
+ console.log('----------- onmouseup');
|
|
|
|
+ this.isDragging = false;
|
|
|
|
+ mapLayer.style.cursor = 'grab';
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ onHouseClick(event) {
|
|
|
|
+ if (this.houseAnimating) return;
|
|
|
|
+ // 处理点击事件
|
|
|
|
+ console.log('house clicked!');
|
|
|
|
+
|
|
|
|
+ // 播放房屋的点击动画
|
|
|
|
+ this.playAnimation('house');
|
|
|
|
+
|
|
|
|
+ // 设置商店名称为"房屋商店"
|
|
|
|
+ this.currentShopName = '材料商店';
|
|
|
|
+ this.shopVisible = true;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ onFarmClick(event) {
|
|
|
|
+ if (this.farmAnimating) return;
|
|
|
|
+ // 处理点击事件
|
|
|
|
+ console.log('farm clicked!111');
|
|
|
|
+
|
|
|
|
+ // 播放大厅的点击动画
|
|
|
|
+ this.playAnimation('farm');
|
|
|
|
+
|
|
|
|
+ // 打开花田对话框
|
|
|
|
+ this.huaTianVisible = true;
|
|
|
|
+ // 将mainLand传递给HuaTian组件
|
|
|
|
+ this.$refs.huaTian && this.$refs.huaTian.setMainLand(this);
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ onShopClick(event) {
|
|
|
|
+ if (this.shopAnimating) return;
|
|
|
|
+ // 处理点击事件
|
|
|
|
+ console.log('shop clicked!');
|
|
|
|
+
|
|
|
|
+ // 播放商店的点击动画
|
|
|
|
+ this.playAnimation('shop');
|
|
|
|
+
|
|
|
|
+ // 设置商店名称为"花店"
|
|
|
|
+ this.currentShopName = '花店';
|
|
|
|
+ // 打开商店对话框
|
|
|
|
+ this.shopVisible = true;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ playAnimation(type) {
|
|
|
|
+ let self = this;
|
|
|
|
+
|
|
|
|
+ // 根据类型设置对应的动画状态
|
|
if (type === 'house') {
|
|
if (type === 'house') {
|
|
- self.houseAnimating = false;
|
|
|
|
|
|
+ this.houseAnimating = true;
|
|
} else if (type === 'farm') {
|
|
} else if (type === 'farm') {
|
|
- self.farmAnimating = false;
|
|
|
|
|
|
+ this.farmAnimating = true;
|
|
} else if (type === 'shop') {
|
|
} else if (type === 'shop') {
|
|
- self.shopAnimating = false;
|
|
|
|
|
|
+ this.shopAnimating = true;
|
|
}
|
|
}
|
|
- }, 800);
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- showInventory() {
|
|
|
|
- console.log('Opening inventory...')
|
|
|
|
- this.inventoryVisible = true
|
|
|
|
- },
|
|
|
|
- onInventoryClose() {
|
|
|
|
- console.log('Closing inventory...')
|
|
|
|
- this.inventoryVisible = false
|
|
|
|
- },
|
|
|
|
- showCharacter() {
|
|
|
|
- console.log('Opening character...')
|
|
|
|
- this.characterVisible = true
|
|
|
|
- },
|
|
|
|
- onCharacterClose() {
|
|
|
|
- console.log('Closing character...')
|
|
|
|
- this.characterVisible = false
|
|
|
|
- },
|
|
|
|
- showShop() {
|
|
|
|
- console.log('Opening shop...')
|
|
|
|
- this.shopVisible = true
|
|
|
|
- },
|
|
|
|
- onShopClose() {
|
|
|
|
- console.log('Closing shop...')
|
|
|
|
- this.shopVisible = false
|
|
|
|
- },
|
|
|
|
- onShopBuy(item) {
|
|
|
|
- console.log('Buying item:', item)
|
|
|
|
- },
|
|
|
|
- onHuaTianClose() {
|
|
|
|
- console.log('Closing hua tian dialog...')
|
|
|
|
- this.huaTianVisible = false
|
|
|
|
- },
|
|
|
|
- startHomeArrowAnimation() {
|
|
|
|
- if (this.homeArrowAnimating) return;
|
|
|
|
- this.homeArrowAnimating = true;
|
|
|
|
|
|
|
|
- const animation = uni.createAnimation({
|
|
|
|
- duration: 1000,
|
|
|
|
- timingFunction: 'ease-in-out',
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- const animate = () => {
|
|
|
|
- if (!this.homeArrowAnimating) return;
|
|
|
|
-
|
|
|
|
- animation.translateY(-20).step({ duration: 1000 });
|
|
|
|
- this.homeArrowAnimation = animation.export();
|
|
|
|
|
|
+ // 创建动画实例
|
|
|
|
+ const animation = uni.createAnimation({
|
|
|
|
+ duration: 400,
|
|
|
|
+ timingFunction: 'ease',
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // 定义果冻动画序列
|
|
|
|
+ animation.scale(0.95).step({
|
|
|
|
+ duration: 100
|
|
|
|
+ })
|
|
|
|
+ .scale(1.05).step({
|
|
|
|
+ duration: 100
|
|
|
|
+ })
|
|
|
|
+ .scale(0.98).step({
|
|
|
|
+ duration: 100
|
|
|
|
+ })
|
|
|
|
+ .scale(1).step({
|
|
|
|
+ duration: 100
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // 根据类型应用动画到对应的元素
|
|
|
|
+ if (type === 'house') {
|
|
|
|
+ this.houseAnimationData = animation.export();
|
|
|
|
+ } else if (type === 'farm') {
|
|
|
|
+ this.farmAnimationData = animation.export();
|
|
|
|
+ } else if (type === 'shop') {
|
|
|
|
+ this.shopAnimationData = animation.export();
|
|
|
|
+ }
|
|
|
|
|
|
|
|
+ // 动画结束后重置状态
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
- animation.translateY(0).step({ duration: 1000 });
|
|
|
|
|
|
+ if (type === 'house') {
|
|
|
|
+ self.houseAnimating = false;
|
|
|
|
+ } else if (type === 'farm') {
|
|
|
|
+ self.farmAnimating = false;
|
|
|
|
+ } else if (type === 'shop') {
|
|
|
|
+ self.shopAnimating = false;
|
|
|
|
+ }
|
|
|
|
+ }, 800);
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ showInventory() {
|
|
|
|
+ console.log('Opening inventory...')
|
|
|
|
+ this.inventoryVisible = true
|
|
|
|
+ },
|
|
|
|
+ onInventoryClose() {
|
|
|
|
+ console.log('Closing inventory...')
|
|
|
|
+ this.inventoryVisible = false
|
|
|
|
+ },
|
|
|
|
+ showCharacter() {
|
|
|
|
+ console.log('Opening character...')
|
|
|
|
+ this.characterVisible = true
|
|
|
|
+ },
|
|
|
|
+ onCharacterClose() {
|
|
|
|
+ console.log('Closing character...')
|
|
|
|
+ this.characterVisible = false
|
|
|
|
+ },
|
|
|
|
+ showShop() {
|
|
|
|
+ console.log('Opening shop...')
|
|
|
|
+ this.shopVisible = true
|
|
|
|
+ },
|
|
|
|
+ onShopClose() {
|
|
|
|
+ console.log('Closing shop...')
|
|
|
|
+ this.shopVisible = false
|
|
|
|
+ },
|
|
|
|
+ onShopBuy(item) {
|
|
|
|
+ console.log('Buying item:', item)
|
|
|
|
+ },
|
|
|
|
+ onHuaTianClose() {
|
|
|
|
+ console.log('Closing hua tian dialog...')
|
|
|
|
+ this.huaTianVisible = false
|
|
|
|
+ },
|
|
|
|
+ startHomeArrowAnimation() {
|
|
|
|
+ if (this.homeArrowAnimating) return;
|
|
|
|
+ this.homeArrowAnimating = true;
|
|
|
|
+
|
|
|
|
+ const animation = uni.createAnimation({
|
|
|
|
+ duration: 1000,
|
|
|
|
+ timingFunction: 'ease-in-out',
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ const animate = () => {
|
|
|
|
+ if (!this.homeArrowAnimating) return;
|
|
|
|
+
|
|
|
|
+ animation.translateY(-20).step({
|
|
|
|
+ duration: 1000
|
|
|
|
+ });
|
|
this.homeArrowAnimation = animation.export();
|
|
this.homeArrowAnimation = animation.export();
|
|
|
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
- if (this.homeArrowAnimating) {
|
|
|
|
- animate();
|
|
|
|
- }
|
|
|
|
|
|
+ animation.translateY(0).step({
|
|
|
|
+ duration: 1000
|
|
|
|
+ });
|
|
|
|
+ this.homeArrowAnimation = animation.export();
|
|
|
|
+
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ if (this.homeArrowAnimating) {
|
|
|
|
+ animate();
|
|
|
|
+ }
|
|
|
|
+ }, 1000);
|
|
}, 1000);
|
|
}, 1000);
|
|
- }, 1000);
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- animate();
|
|
|
|
- },
|
|
|
|
- goHome() {
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: '/pages/isLand/homeLand'
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- // 打开任务对话框
|
|
|
|
- onTaskClick() {
|
|
|
|
- console.log('Opening task dialog...')
|
|
|
|
- this.taskDialogVisible = true
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- // 关闭任务对话框
|
|
|
|
- onTaskDialogClose() {
|
|
|
|
- console.log('Closing task dialog...')
|
|
|
|
- this.taskDialogVisible = false
|
|
|
|
- },
|
|
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ animate();
|
|
|
|
+ },
|
|
|
|
+ goHome() {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: '/pages/isLand/homeLand'
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 打开任务对话框
|
|
|
|
+ onTaskClick() {
|
|
|
|
+ console.log('Opening task dialog...')
|
|
|
|
+ this.taskDialogVisible = true
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 关闭任务对话框
|
|
|
|
+ onTaskDialogClose() {
|
|
|
|
+ console.log('Closing task dialog...')
|
|
|
|
+ this.taskDialogVisible = false
|
|
|
|
+ },
|
|
|
|
+ // 获取用户铃钱
|
|
|
|
+ getUserMoney() {
|
|
|
|
+ uni.request({
|
|
|
|
+ url: this.$apiHost + '/User/getinfo',
|
|
|
|
+ method: 'GET',
|
|
|
|
+ data: {
|
|
|
|
+ uuid: getApp().globalData.uuid
|
|
|
|
+ },
|
|
|
|
+ header: {
|
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
|
+ 'sign': getApp().globalData.headerSign,
|
|
|
|
+ },
|
|
|
|
+ success: (res) => {
|
|
|
|
+ if (res.data) {
|
|
|
|
+ console.log("res.getUserMoney", res.data)
|
|
|
|
+ this.userInfo = res.data;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-}
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-@import './mainLand.scss';
|
|
|
|
-.ui-layer {
|
|
|
|
- position: fixed;
|
|
|
|
- top: 0;
|
|
|
|
- left: 0;
|
|
|
|
- right: 0;
|
|
|
|
- bottom: 0;
|
|
|
|
- pointer-events: none;
|
|
|
|
- z-index: 100;
|
|
|
|
-
|
|
|
|
- .ui-content {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 20rpx;
|
|
|
|
- right: 20rpx;
|
|
|
|
- pointer-events: auto;
|
|
|
|
- z-index: 101;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .ui-buttons {
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- gap: 20rpx;
|
|
|
|
-
|
|
|
|
- .ui-icon-button {
|
|
|
|
- transition: transform 0.2s ease;
|
|
|
|
-
|
|
|
|
- &:active {
|
|
|
|
- transform: scale(0.9);
|
|
|
|
- opacity: 0.8;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .ui-button {
|
|
|
|
- // background: rgba(255, 255, 255, 0.9);
|
|
|
|
- // border: none;
|
|
|
|
- width: 120rpx;
|
|
|
|
- padding: 16rpx 32rpx;
|
|
|
|
- border-radius: 8rpx;
|
|
|
|
- font-size: 28rpx;
|
|
|
|
- color: #333;
|
|
|
|
- // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
- min-width: 120rpx;
|
|
|
|
-
|
|
|
|
- &:active {
|
|
|
|
- opacity: 0.8;
|
|
|
|
- transform: scale(0.95);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .backpack-button {
|
|
|
|
- background-image: url('/static/island/icon_backpack.png');
|
|
|
|
- background-size: cover;
|
|
|
|
- background-position: center;
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.map-layer {
|
|
|
|
- position: relative;
|
|
|
|
- z-index: 1;
|
|
|
|
- cursor: grab;
|
|
|
|
-
|
|
|
|
- &:active {
|
|
|
|
- cursor: grabbing;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.home-arrow {
|
|
|
|
-// background: rgba(255, 255, 255, 0.9);
|
|
|
|
- position: absolute;
|
|
|
|
- left: 40rpx; // 调整到左边位置
|
|
|
|
- bottom: 460rpx;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- align-items: center;
|
|
|
|
- cursor: pointer;
|
|
|
|
- z-index: 10;
|
|
|
|
- transition: opacity 0.5s ease-in-out; // 添加淡入效果
|
|
|
|
-
|
|
|
|
- .arrow {
|
|
|
|
- content: '';
|
|
|
|
- display: block;
|
|
|
|
- width: 60rpx;
|
|
|
|
- height: 60rpx;
|
|
|
|
- background: url('/static/island/arrow.png') no-repeat center center;
|
|
|
|
- background-size: contain;
|
|
|
|
- transform: rotate(90deg);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .home-text {
|
|
|
|
- color: #ffffff;
|
|
|
|
- font-size: 32rpx;
|
|
|
|
- text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
|
|
|
|
- margin-top: 10rpx;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|
|
|
|
+ @import './mainLand.scss';
|
|
|
|
+
|
|
|
|
+ .ui-layer {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ pointer-events: none;
|
|
|
|
+ z-index: 100;
|
|
|
|
+
|
|
|
|
+ .ui-content {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 20rpx;
|
|
|
|
+ right: 20rpx;
|
|
|
|
+ pointer-events: auto;
|
|
|
|
+ z-index: 101;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ui-buttons {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ gap: 20rpx;
|
|
|
|
+
|
|
|
|
+ .ui-icon-button {
|
|
|
|
+ transition: transform 0.2s ease;
|
|
|
|
+
|
|
|
|
+ &:active {
|
|
|
|
+ transform: scale(0.9);
|
|
|
|
+ opacity: 0.8;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ui-button {
|
|
|
|
+ // background: rgba(255, 255, 255, 0.9);
|
|
|
|
+ // border: none;
|
|
|
|
+ width: 120rpx;
|
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #333;
|
|
|
|
+ // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
+ min-width: 120rpx;
|
|
|
|
+
|
|
|
|
+ &:active {
|
|
|
|
+ opacity: 0.8;
|
|
|
|
+ transform: scale(0.95);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .backpack-button {
|
|
|
|
+ background-image: url('/static/island/icon_backpack.png');
|
|
|
|
+ background-size: cover;
|
|
|
|
+ background-position: center;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .map-layer {
|
|
|
|
+ position: relative;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ cursor: grab;
|
|
|
|
+
|
|
|
|
+ &:active {
|
|
|
|
+ cursor: grabbing;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .home-arrow {
|
|
|
|
+ // background: rgba(255, 255, 255, 0.9);
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 40rpx; // 调整到左边位置
|
|
|
|
+ bottom: 460rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ z-index: 10;
|
|
|
|
+ transition: opacity 0.5s ease-in-out; // 添加淡入效果
|
|
|
|
+
|
|
|
|
+ .arrow {
|
|
|
|
+ content: '';
|
|
|
|
+ display: block;
|
|
|
|
+ width: 60rpx;
|
|
|
|
+ height: 60rpx;
|
|
|
|
+ background: url('/static/island/arrow.png') no-repeat center center;
|
|
|
|
+ background-size: contain;
|
|
|
|
+ transform: rotate(90deg);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .home-text {
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
|
|
|
|
+ margin-top: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|