home page

config.js

@@ -1,5 +1,4 @@
 export default {
-    // appid: "wx050dfaee3a93ddd2",//020
     appid: "wx9e378ea72244da67",//o2o
     company: "EbxZUK5lBI",
     rootPage: "/nova-tourism/pages/index/index",

nova-tourism/components/home/index.js

@@ -0,0 +1,41 @@
+// nova-tourism/components/home/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        //  轮播图数组
+        imageUrls: ['https://tse4-mm.cn.bing.net/th/id/OIP-C.3r1vguZyWFUJ80A2Nf2k3AHaEK?rs=1&pid=ImgDetMain', 'https://ts1.cn.mm.bing.net/th/id/R-C.9881613a29f26488b40938427aa585e4?rik=fim4XvDejjHE%2fQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20220516ac%2f797%2fw2048h1149%2f20220516%2fb0aa-5aca29fe2dfa69c385118bbc74d039de.jpg&ehk=tzq%2bJP6uMipI0aIHY3bMSVO7lS7ZQM6TKMlwZ5CFP4s%3d&risl=&pid=ImgRaw&r=0', 'https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg', 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/04/ChMkJ1bKyEyIMaKUAAhskHwWGqUAALIAAM2KsIACGyo249.jpg'],
+        index: 1,
+        //卡片数组
+        cardarr:[1,2,3,4,5,6,7]
+    },
+    lifetimes: {
+
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+        attached: async function () {
+            // 在组件实例进入页面节点树时执行
+        },
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        //随轮播图变化而变化
+        onSwiperChange: function (event) {
+            const currentIndex = event.detail.current; // 获取当前索引
+            this.setData({
+                index: currentIndex + 1
+            })
+        }
+    }
+})

nova-tourism/components/home/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index"
+    }
+}

nova-tourism/components/home/index.less

@@ -0,0 +1,144 @@
+
+/* nova-caipu/pages/new-app/index.wxss */
+.all{
+    width: 100vw;
+    height: 100vh;
+    background-color: #f7f7f7;
+    overflow-y: scroll;
+    position: relative;
+    .picturebox{
+        width: 100%;
+        height: 480rpx;
+        position: relative;
+        .img{
+            width: 100%;
+            height: 480rpx;
+            image{
+                width: 100%;
+                height: 100%;
+
+            }
+        }
+        .numberbox{
+            position: absolute;
+            bottom: 40rpx;
+            right: 20rpx;
+            border-radius: 45%;
+            z-index: 10;
+            color: white;
+            width: 70rpx;
+            height: 45rpx;
+            font-size: 24rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(12, 12, 12, 0.5);
+        }
+    }
+    .Legendary-Information{
+        width: 100%;
+        height: 70%;
+        background-color: white;
+        border-top-left-radius: 20px; /* 左上角圆角 */
+        border-top-right-radius: 20px; /* 右上角圆角 */
+        position: absolute;
+        top: 455rpx;
+        padding-top: 20rpx;
+        padding-left: 25rpx;
+        padding-right: 20rpx;
+        z-index: 10;
+        .text{
+            width: 100%;
+            height: 100rpx;
+            display: flex;
+            
+            margin-top: 10rpx;
+            .namebox{
+                width: 75%;
+                height: 100rpx;
+                .name{
+                    font-size: 35rpx;
+                    font-weight: 500;
+                }
+                .adress{
+                    font-size: 30rpx;
+                    white-space: nowrap; /* 不换行 */
+                    overflow: hidden; /* 隐藏超出部分 */
+                    text-overflow: ellipsis; /* 超出部分显示省略号 */
+                }
+            }
+            .markerbox{
+                width: 25%;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+        }
+        .datebox{
+            width: 100%;
+            height: 90rpx;
+            background-color: #f7f7f7;
+        }
+        .cardbox{
+            .card{
+                width: 100%;
+                height: 620rpx;
+                background-color: white;
+                margin-top: 15rpx;
+                .img{
+                    width: 100%;
+                    height: 480rpx;
+                }
+                .name{
+                    font-size: 30rpx;
+                }
+                .intruduce{
+                    font-size: 28rpx;
+                }
+                .buttombox{
+                    width: 100%;
+                    height: 60rpx;
+                    color: red;
+                    display: flex;
+                    align-items: center;
+
+                    .salary{
+                        width: 50%;
+                        height: 100%;
+                        display: flex;
+                        
+                        .symbol{
+                            height: 100%;
+                            font-size: 28rpx;
+                            display: flex;
+                            align-items: flex-end;
+                        }
+                        .number{
+                            height: 100%;
+                            display: flex;
+                            align-items: flex-end;
+                            font-size: 35rpx;
+                        }
+                    }
+                    .buttom{
+                        width: 130rpx;
+                        height: 50rpx;
+                        font-size: 30rpx;
+                        color: white;
+                        background-color: red;
+                        border-radius: 48rpx;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        margin-left: auto;
+                    }
+
+                }
+            }
+        }
+
+    }
+
+}

nova-tourism/components/home/index.wxml

@@ -0,0 +1,51 @@
+<!--nova-caipu/pages/new-app/index.wxml-->
+<view class="all">
+    <!-- 轮播图 -->
+    <view class="picturebox">
+        <swiper autoplay="{{true}}" interval="{{3000}}" duration="{{500}}" class="img" bindchange="onSwiperChange">
+            <block wx:for="{{imageUrls}}" wx:key="index" wx:for-item="img">
+                <swiper-item class="img">
+                    <image src="{{img}}" mode="aspectFill"></image>
+                </swiper-item>
+            </block>
+        </swiper>
+        <view class="numberbox">{{index}}/{{imageUrls.length}}</view>
+    </view>
+    <!-- 民宿信息 -->
+    <view class="Legendary-Information" style="height: {{cardarr.length == 1 ? '1000rpx' : (450 + cardarr.length * 635) + 'rpx'}}">
+        <view class="text">
+            <view class="namebox">
+                <view class="name">望·三清艺术部落 ></view>
+                <view class="adress">地点地点地点地点地点地点地点地点地点地点地点地点地点地点地点地点地点地点</view>
+            </view>
+            <view class="markerbox">
+                <view>
+                    <van-icon name="location-o" size='25px' />
+                    |
+                    <van-icon name="phone-o" size='25px' />
+                </view>
+            </view>
+        </view>
+        <!-- 日期 -->
+        <view class="datebox">
+
+        </view>
+        <!-- 卡片 -->
+        <view class="cardbox" wx:for="{{cardarr}}">
+            <view class="card">
+                <image class="img" src='https://tse4-mm.cn.bing.net/th/id/OIP-C.3r1vguZyWFUJ80A2Nf2k3AHaEK?rs=1&pid=ImgDetMain'></image>
+                <view class="name">彩虹木屋</view>
+                <view class="intruduce">整房1室·1床·适用2人</view>
+                <view class="buttombox">
+                    <view class="salary">
+                        <view class="symbol">￥</view>
+                        <view class="number">0.00</view>
+                    </view>
+                    <view class="buttom">预定</view>
+                </view>
+            </view>
+
+        </view>
+    </view>
+
+</view>

nova-tourism/pages/index/index.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "home":"../../components/home/index"
+  }
 }

project.config.json

@@ -1,60 +1,60 @@
 {
-  "description": "项目配置文件",
-  "packOptions": {
-    "ignore": [
-      {
-        "value": "package-lock.json",
-        "type": "file"
-      }
-    ],
-    "include": []
-  },
-  "setting": {
-    "urlCheck": false,
-    "es6": true,
-    "enhance": true,
-    "postcss": true,
-    "preloadBackgroundData": false,
-    "minified": true,
-    "newFeature": false,
-    "coverView": true,
-    "nodeModules": false,
-    "autoAudits": false,
-    "showShadowRootInWxmlPanel": true,
-    "scopeDataCheck": false,
-    "uglifyFileName": false,
-    "checkInvalidKey": true,
-    "checkSiteMap": true,
-    "uploadWithSourceMap": true,
-    "compileHotReLoad": false,
-    "lazyloadPlaceholderEnable": false,
-    "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": true,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
+    "description": "项目配置文件",
+    "packOptions": {
+        "ignore": [
+            {
+                "value": "package-lock.json",
+                "type": "file"
+            }
+        ],
+        "include": []
     },
-    "useIsolateContext": true,
-    "userConfirmedBundleSwitch": false,
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true,
-    "disableUseStrict": false,
-    "minifyWXML": true,
-    "showES6CompileOption": false,
-    "useCompilerPlugins": false,
-    "ignoreUploadUnusedFiles": true
-  },
-  "compileType": "miniprogram",
-  "libVersion": "2.27.3",
-  "appid": "wx9e378ea72244da67",
-  "projectname": "nova-wapp",
-  "cloudfunctionTemplateRoot": "",
-  "editorSetting": {
-    "tabIndent": "insertSpaces",
-    "tabSize": 2
-  },
-  "condition": {}
+    "setting": {
+        "urlCheck": true,
+        "es6": true,
+        "enhance": true,
+        "postcss": true,
+        "preloadBackgroundData": false,
+        "minified": true,
+        "newFeature": false,
+        "coverView": true,
+        "nodeModules": false,
+        "autoAudits": false,
+        "showShadowRootInWxmlPanel": true,
+        "scopeDataCheck": false,
+        "uglifyFileName": false,
+        "checkInvalidKey": true,
+        "checkSiteMap": true,
+        "uploadWithSourceMap": true,
+        "compileHotReLoad": false,
+        "lazyloadPlaceholderEnable": false,
+        "useMultiFrameRuntime": true,
+        "useApiHook": true,
+        "useApiHostProcess": true,
+        "babelSetting": {
+            "ignore": [],
+            "disablePlugins": [],
+            "outputPath": ""
+        },
+        "enableEngineNative": false,
+        "useIsolateContext": true,
+        "userConfirmedBundleSwitch": false,
+        "packNpmManually": false,
+        "packNpmRelationList": [],
+        "minifyWXSS": true,
+        "disableUseStrict": false,
+        "minifyWXML": true,
+        "showES6CompileOption": false,
+        "useCompilerPlugins": false
+    },
+    "compileType": "miniprogram",
+    "libVersion": "2.27.3",
+    "appid": "wx9e378ea72244da67",
+    "projectname": "nova-wapp",
+    "cloudfunctionTemplateRoot": "",
+    "editorSetting": {
+        "tabIndent": "insertSpaces",
+        "tabSize": 2
+    },
+    "condition": {}
 }