card

src/pages/index/tabs/Guide.jsx

@@ -9,10 +9,9 @@ import position from '@/assets/icons/GuideCheck/position_logo.png'
 import Cup from '@/assets/icons/GuideCheck/Cup.png'
 import starOn from '@/assets/icons/GuideCheck/starOn.png'
 import starOff from '@/assets/icons/GuideCheck/starOff.png'
-import Boon from '@/assets/icons/GuideCheck/Boon.jpg'
 import loveOn from '@/assets/icons/GuideCheck/loveOn.png'
 import Raiders from '@/assets/icons/GuideCheck/Raiders.png'
-
+import RaidersImage from '@/assets/icons/GuideCheck/RaidersImage.jpg'
 import './GuideCss/style.less'
 
 
@@ -39,116 +38,168 @@ export default (props) => {
   }
   // onClick={handleClick}
   return (
+    <scroll-view scroll-y style='height: 77vh;' >
 
-    <view className='Guide-Home-box'>
-      {/* <view className='Guide-image-text-box'>
-        <image className='Guide-images' src={sleep} />
-        <view className='Guide-text'>休息一下，休息一下~</view>
-      </view> */}
-      {/* 图片结束 */}
-      {/* <view className='Guide-Content-box'>
-        <view className='title-image'>
-          <image mode='scaleToFill' className='title-image-cup' src={Cup} />
-          <text className='title-title-boss' >老板推荐好吃的</text>
-        </view>
-      </view> */}
-      {/* 小标题结束 */}
-      {/* <view class='wrapper'> */}
-      {/* <view class='left-complete-one'>
-          <image className='left-image-1' src={ProCard_hot}></image>
-          <view className='left-viewText'>
-            返现￥16.00
-          </view> */}
-      {/* 评分 */}
-      {/* <view className='card-box-star'>
-            {
-              scoreList.map((_, index) => {
-                console.log(index)
-                const src = (index + '0.1') < score ? starOn : starOff
-                return (
-                  <image className='card-star-image' key={index} src={src} />
-                )
-              })
-            }
-            <text className='card-star-text' >{score}</text>
+      <view className='Guide-Home-box'>
+        {/* <view className='Guide-image-text-box'>
+          <image className='Guide-images' src={sleep} />
+          <view className='Guide-text'>休息一下，休息一下~</view>
+        </view> */}
+        {/* 图片结束 */}
+        {/* 有民宿的情况下 */}
+        <view className='MessageCard'>
+          <view className='MessageCard-title1'>
+            <text className='MessageCard-left'>----------</text>
+            停车位置
+            <text className='MessageCard-right'>----------</text>
+          </view>
+          <view className='MessageCard-content'>
+            <view className='MessageCard-name' >江苏通讯大厦停车厂</view>
+            <view className='MessageCard-info' >江苏省南京市秦淮区集庆路</view>
           </view>
+          <view className='MessageCard-button'>
+            <image className='MessageCard-image' />
+            <text className='MessageCard-text'>去这里</text>
+          </view>
+        </view>
+
+        <view className='Guide-Content-box'>
           <view className='title-image'>
-            <image className='image-1' mode='scaleToFill' src={image}></image>
-            <image className='image-2' src={food}></image>
+            <image mode='scaleToFill' className='title-image-cup' src={Cup} />
+            <text className='title-title-boss' >老板推荐好吃的</text>
           </view>
-          <view className='title-content'>
-            <view className='Pro-title'>
-              <view className='title-text'>【橘里橘啊换行啊啊啊气咖啡店】新鲜出炉啦!</view>
+        </view>
+        {/* 小标题结束 */}
+        <view class='wrapper'>
+          <view class='left-complete-one'>
+            <image className='left-image-1' src={ProCard_hot}></image>
+            <view className='left-viewText'>
+              返现￥16.00
+            </view>
+            {/* 评分 */}
+            <view className='card-box-star'>
+              {
+                scoreList.map((_, index) => {
+                  console.log(index)
+                  const src = (index + '0.1') < score ? starOn : starOff
+                  return (
+                    <image className='card-star-image' key={index} src={src} />
+                  )
+                })
+              }
+              <text className='card-star-text' >{score}</text>
+            </view>
+            <view className='title-image'>
+              <image className='image-1' mode='scaleToFill' src={image}></image>
+              <image className='image-2' src={food}></image>
             </view>
-            <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text> */}
-      {/* <view className='title-time' >有效期：2021/06/21-2021/12/31</view> */}
-      {/* <view className='title-position-on'>
-              <image className='title-position' src={position} />
-              <text className='title-position-image'>南京市/秦淮区</text>
-              <image className='title-on' src={imageSrc} />
-              <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+            <view className='title-content'>
+              <view className='Pro-title'>
+                <view className='title-text'>【橘里橘啊换行啊啊啊气咖啡店】新鲜出炉啦!</view>
+              </view>
+              <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
+              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
+              <view className='title-position-on'>
+                <image className='title-position' src={position} />
+                <text className='title-position-image'>南京市/秦淮区</text>
+                <image className='title-on' src={imageSrc} />
+                <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+              </view>
+            </view>
+          </view>
+          <view class='right-complete-two'>
+            <view className='right-content'>
+              <image className='right-image' src={Pay} />
+              <view className='right-title'>支付</view>
             </view>
           </view>
         </view>
-        <view class='right-complete-two'>
-          <view className='right-content'> */}
-      {/* <view className='right-number'>×1</view> */}
-      {/* <image className='right-image' src={Pay} />
-            <view className='right-title'>支付</view>
+        {/* 卡片----------------- */}
+        <view class='wrapper'>
+          <view class='left-complete-one'>
+            <image className='left-image-1' src={ProCard_hot}></image>
+            <view className='left-viewText'>
+              返现￥16.00
+            </view>
+            {/* 评分 */}
+            <view className='card-box-star'>
+              {
+                scoreList.map((_, index) => {
+                  console.log(index)
+                  const src = (index + '0.1') < score ? starOn : starOff
+                  return (
+                    <image className='card-star-image' key={index} src={src} />
+                  )
+                })
+              }
+              <text className='card-star-text' >{score}</text>
+            </view>
+            <view className='title-image'>
+              <image className='image-1' mode='scaleToFill' src={image}></image>
+              <image className='image-2' src={food}></image>
+            </view>
+            <view className='title-content'>
+              <view className='Pro-title'>
+                <view className='title-text'>【橘里橘啊换行啊啊啊气咖啡店】新鲜出炉啦!</view>
+              </view>
+              <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
+              {/* ProCard区域定位 */}
+              <view className='title-position-on'>
+                <image className='title-position' src={position} />
+                <text className='title-position-image'>南京市/秦淮区</text>
+                <image className='title-on' src={imageSrc} />
+                <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+              </view>
+            </view>
+          </view>
+          <view class='right-complete-two'>
+            <view className='right-content'>
+              {/* <view className='right-number'>×1</view> */}
+              <image className='right-image' src={Pay} />
+              <view className='right-title'>支付</view>
+            </view>
           </view>
         </view>
-      </view> */}
-      {/* 卡片----------------- */}
-      <view class='wrapper'>
-        <view class='left-complete-one'>
-          <image className='left-image-1' src={ProCard_hot}></image>
-          <view className='left-viewText'>
-            返现￥16.00
+        {/* 卡片------------- */}
+        <view className='Guide-Content-box-two'>
+          <view className='title-image-two'>
+            <image mode='scaleToFill' className='title-image-cup-two' src={Cup} />
+            <text className='title-title-boss-two' >老板推荐的攻略</text>
           </view>
-          {/* 评分 */}
-          <view className='card-box-star'>
-            {
-              scoreList.map((_, index) => {
-                console.log(index)
-                const src = (index + '0.1') < score ? starOn : starOff
-                return (
-                  <image className='card-star-image' key={index} src={src} />
-                )
-              })
-            }
-            <text className='card-star-text' >{score}</text>
+        </view>
+        {/* 小标题结束 */}
+        {/* 攻略卡片 */}
+        <view className='Raiders-box-one'>
+          <view className='Raiders-imageLove'>
+            <image className='Raiders-image-Raiders' src={Raiders} />
+            <image className='Raiders-image-loveOn' src={loveOn} />
           </view>
-          <view className='title-image'>
-            <image className='image-1' mode='scaleToFill' src={image}></image>
-            <image className='image-2' src={food}></image>
+          <view className='Raiders-box'>
+            <image className='Raiders-image' mode='widthFix' src={RaidersImage} />
+            <text className='Raiders-text'>南京古称金陵，自东吴孙权迁都南京以来，多个汉字汉字汉字汉字</text>
+            <view className='Raiders-kilometer-on'>
+              <image className='Raiders-kilometer' src={position} />
+              <text className='Raiders-kilometer-image'>12.8公里</text>
+              <text className='Raiders-on-text'>￥8888/人</text>
+            </view>
           </view>
-          <view className='title-content'>
-            <view className='Pro-title'>
-              <view className='title-text'>【橘里橘啊换行啊啊啊气咖啡店】新鲜出炉啦!</view>
+          <view className='Raiders-box' style='padding-lift:10px'>
+            <view className='Raiders-imageLove'>
+              <image className='Raiders-image-Raiders' src={Raiders} />
+              <image className='Raiders-image-loveOn' src={loveOn} />
             </view>
-            <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
-            {/* <view className='title-time' >有效期：2021/06/21-2021/12/31</view> */}
-            <view className='title-position-on'>
-              <image className='title-position' src={position} />
-              <text className='title-position-image'>南京市/秦淮区</text>
-              <image className='title-on' src={imageSrc} />
-              <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+            <image className='Raiders-image' mode='widthFix' src={RaidersImage} />
+            <text className='Raiders-text'>南京古称金陵，自东吴孙权迁都南京以来，多个汉字汉字汉字汉字</text>
+            <view className='Raiders-kilometer-on'>
+              <image className='Raiders-kilometer' src={position} />
+              <text className='Raiders-kilometer-image'>12.8公里</text>
+              <text className='Raiders-on-text'>￥8888/人</text>
             </view>
           </view>
+          {/* <view className='Raiders-box'></view> */}
         </view>
-        <view class='right-complete-two'>
-          <view className='right-content'>
-            {/* <view className='right-number'>×1</view> */}
-            <image className='right-image' src={Pay} />
-            <view className='right-title'>支付</view>
-          </view>
-        </view>
-      </view>
-      {/* 卡片------------- */}
-      <view className='Raiders-box-one'>
-        <view className='Raiders-box'></view>
-        <view className='Raiders-box'></view>
       </view>
-    </view>
+    </scroll-view>
+
   )
 }

src/pages/index/tabs/GuideCss/style.less

@@ -5,6 +5,47 @@
 }
 .Guide-Home-box {
   // width: 333333333333px;
+  .MessageCard {
+    width: 690px;
+    height: 175px;
+    background: #ffffff;
+    border-radius: 12px;
+    margin: 30px auto;
+    .MessageCard-title1 {
+      width: 55px;
+      height: 26px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #666666;
+      line-height: 44px;
+      .MessageCard-left {
+        width: 530px;
+        height: 2px;
+        padding-right: 50px;
+
+        opacity: 0.5;
+      }
+      .MessageCard-right {
+        width: 530px;
+        height: 2px;
+        padding-left: 50px;
+        opacity: 0.5;
+      }
+    }
+    .MessageCard-content {
+      .MessageCard-name {
+      }
+      .MessageCard-info {
+      }
+    }
+    .MessageCard-button {
+      .MessageCard-image {
+      }
+      .MessageCard-text {
+      }
+    }
+  }
+
   .Guide-image-text-box {
     width: 472px;
     height: 548px;
@@ -272,17 +313,118 @@
     height: 70%;
     border-left: 1px dashed #595959;
   }
+  .Guide-Content-box-two {
+    margin-top: 61px;
+    margin-bottom: 31px;
+    .title-image-two {
+      display: flex;
+      width: 270px;
+      height: 40px;
+      .title-image-cup-two {
+        width: 32px;
+        height: 32px;
+        margin-top: 10px;
+        padding-right: 10px;
+        align-items: center;
+      }
+
+      .title-title-boss-two {
+        align-items: center;
+
+        font-size: 32px;
+        font-weight: 800;
+        color: #202020;
+      }
+    }
+  }
 
   //攻略卡片.
   .Raiders-box-one {
-    width: 100%;
-    height: 694px;
-    border: 1px solid red;
+    // width: 100%;
+    // // background-color: black;
+    margin-bottom: 60px;
+    display: flex;
+    flex: 2;
+    flex-flow: row wrap;
+    align-content: flex-start;
+    .Raiders-imageLove {
+      display: flex;
+      position: absolute;
+      width: 330px;
+
+      .Raiders-image-Raiders {
+        // position: absolute;
+        width: 99px;
+        height: 37px;
+      }
+      .Raiders-image-loveOn {
+        position: absolute;
+        top: 12px;
+        right: 21px;
+        width: 22px;
+        height: 20px;
+      }
+    }
     .Raiders-box {
-      display: inline;
-      border: 1px solid RED;
+      // display: inline;
+      // border: 1px solid RED;
       width: 330px;
-      height: 649px;
+      // height: 649px;
+      background: #ffffff;
+      box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+      border-radius: 24px;
+      flex-grow: 1;
+      // padding-right: 30px;
+      // display: flex;
+      // flex-flow: row nowrap;
+      justify-content: space-between;
+      .Raiders-image {
+        width: 330px;
+        height: 439px !important;
+        border-radius: 24px 24px 0px 0px;
+      }
+      .Raiders-text {
+        margin: auto;
+        width: 287px;
+        font-size: 24px;
+        font-weight: 700;
+        color: #404040;
+        line-height: 46px;
+        padding-top: 28px;
+        margin-bottom: 42px;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        word-wrap: break-word;
+      }
+      .Raiders-kilometer-on {
+        text-align: center;
+        margin-bottom: 50px;
+
+        .Raiders-kilometer {
+          width: 18px;
+          height: 24px;
+          padding-right: 10px;
+        }
+        .Raiders-kilometer-image {
+          width: 90px;
+          height: 21px;
+          font-size: 24px;
+          font-weight: 400;
+          color: #c0c8d3;
+        }
+        .Raiders-on-text {
+          padding-left: 75px;
+          width: 70px;
+          height: 21px;
+          font-size: 24px;
+          font-weight: 400;
+          color: #ff3434;
+        }
+      }
     }
   }
 }

yarn-error.log

@@ -0,0 +1,87 @@
+Arguments: 
+  C:\Program Files\nodejs\node.exe C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
+
+PATH: 
+  C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Users\Administrator\AppData\Local\Microsoft\WindowsApps;C:\Users\Administrator\AppData\Roaming\npm;F:\Microsoft VS Code\bin
+
+Yarn version: 
+  1.22.11
+
+Node version: 
+  14.17.3
+
+Platform: 
+  win32 x64
+
+Trace: 
+  Error: getaddrinfo ENOTFOUND registry.npm.taobao.org
+      at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:69:26)
+
+npm manifest: 
+  {
+    "name": "miniapp",
+    "version": "1.0.0",
+    "private": true,
+    "description": "十公里",
+    "templateInfo": {
+      "name": "default",
+      "typescript": false,
+      "css": "less"
+    },
+    "scripts": {
+      "build:weapp": "taro build --type weapp",
+      "build:swan": "taro build --type swan",
+      "build:alipay": "taro build --type alipay",
+      "build:tt": "taro build --type tt",
+      "build:h5": "taro build --type h5",
+      "build:rn": "taro build --type rn",
+      "build:qq": "taro build --type qq",
+      "build:jd": "taro build --type jd",
+      "build:quickapp": "taro build --type quickapp",
+      "dev:weapp": "npm run build:weapp -- --watch",
+      "dev:swan": "npm run build:swan -- --watch",
+      "dev:alipay": "npm run build:alipay -- --watch",
+      "dev:tt": "npm run build:tt -- --watch",
+      "dev:h5": "npm run build:h5 -- --watch",
+      "dev:rn": "npm run build:rn -- --watch",
+      "dev:qq": "npm run build:qq -- --watch",
+      "dev:jd": "npm run build:jd -- --watch",
+      "dev:quickapp": "npm run build:quickapp -- --watch"
+    },
+    "browserslist": [
+      "last 3 versions",
+      "Android >= 4.1",
+      "ios >= 8"
+    ],
+    "author": "",
+    "dependencies": {
+      "@babel/runtime": "^7.7.7",
+      "@tarojs/components": "3.3.2",
+      "@tarojs/react": "3.3.2",
+      "@tarojs/runtime": "3.3.2",
+      "@tarojs/taro": "3.3.2",
+      "react": "^17.0.0",
+      "react-dom": "^17.0.0",
+      "taro-ui": "^2.3.4"
+    },
+    "devDependencies": {
+      "@types/webpack-env": "^1.13.6",
+      "@types/react": "^17.0.2",
+      "@tarojs/mini-runner": "3.3.2",
+      "@babel/core": "^7.8.0",
+      "@tarojs/webpack-runner": "3.3.2",
+      "babel-preset-taro": "3.3.2",
+      "eslint-config-taro": "3.3.2",
+      "eslint": "^6.8.0",
+      "eslint-plugin-react": "^7.8.2",
+      "eslint-plugin-import": "^2.12.0",
+      "eslint-plugin-react-hooks": "^4.2.0",
+      "stylelint": "9.3.0"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile