入住指引

.eslintrc

@@ -2,6 +2,7 @@
   "extends": ["taro/react"],
   "rules": {
     "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off"
-  }
+    "react/react-in-jsx-scope": "off",
+    "no-unused-vars": "warn"
+  },
 }

package.json

@@ -37,11 +37,12 @@
   "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",
-    "@tarojs/react": "3.3.2",
+    "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "react": "^17.0.0"
+    "taro-ui": "^2.3.4"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.13.6",

src/app.config.js

@@ -2,6 +2,7 @@ export default {
   pages: [
     'pages/index/index',
     'pages/test/index',
+    'pages/PayOrder/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/components/ProCard/index.jsx

@@ -0,0 +1,38 @@
+import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
+
+import './style.less'
+
+export default (props) => {
+
+  return (
+    <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='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>
+              <view className='title-time' >有效期：2021/06/21-2021/12/31</view> */}
+        </view>
+      </view>
+      <view class='right-complete-two'>
+        <view className='right-content'>
+          {/* <view className='right-number'>×1</view> */}
+          {/* <view className='right-title'>数量</view> */}
+        </view>
+      </view>
+    </view>
+
+
+  )
+
+
+}

src/components/ProCard/style.less

@@ -0,0 +1,166 @@
+@whiteColor: #fff;
+@Image-ProCard_hot: "../../assets/icons/ProCard/ProCard_hot.png";
+
+.wrapper {
+  display: flex;
+  position: relative;
+  // margin-top: 600px;
+  margin: 30px auto;
+  width: 700px;
+
+  // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+  // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
+  filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
+
+  .left-complete-one {
+    padding-top: 87px;
+    padding-bottom: 43px;
+    position: relative;
+    display: flex;
+    background: @whiteColor;
+    background: radial-gradient(
+          circle at top right,
+          transparent 15px,
+          @whiteColor 0
+        )
+        top right,
+      radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
+        bottom right;
+    background-size: 100% 60%;
+    background-repeat: no-repeat;
+
+    width: 573px;
+    border-radius: 15px 0px 0px 15px;
+    // border-radius: 12px;
+
+    align-items: center;
+    .left-image-1 {
+      width: 145px;
+      height: 44px;
+      position: absolute;
+      top: 22px;
+    }
+    .left-viewText {
+      // background-image: url(@Image-ProCard_hot);
+      // width: 287px;
+      width: auto;
+      height: 44.3px;
+      position: absolute;
+      left: 1px;
+      top: 28px;
+      font-size: 24px;
+      color: @whiteColor;
+      font-weight: 600;
+    }
+    //图片
+    .title-image {
+      width: 145px;
+      margin-left: 20px;
+      border-radius: 24px;
+      overflow: hidden;
+      position: relative;
+
+      .image-1 {
+        width: 100%;
+        height: 145px;
+      }
+      .image-2 {
+        width: 89px;
+        height: 34px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
+    // 商品标题
+    .title-content {
+      // padding: 84px 0 56px 20px;
+      padding-left: 18px;
+
+      .Pro-title {
+        .title-text {
+          width: 375px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box; //必须要
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all; /* 多出文本省略号代替 */
+          text-align: left;
+          font-size: 24px;
+          padding-bottom: 10px;
+        }
+      }
+      .title-money {
+        padding-top: 34px;
+        font-size: 24px;
+        // color: red;
+        font-weight: 800;
+      }
+      .title-money-2 {
+        font-size: 18px;
+        color: #666;
+        padding-left: 10px;
+        text-decoration: line-through;
+      }
+
+      .title-time {
+        font-size: 24px;
+        padding-top: 20px;
+        color: #c0c8d3;
+      }
+    }
+  }
+}
+
+.right-complete-two {
+  background: @whiteColor;
+  background: radial-gradient(
+        circle at top left,
+        transparent 15px,
+        @whiteColor 0
+      )
+      top left,
+    radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
+      bottom left;
+  background-size: 100% 60%;
+  background-repeat: no-repeat;
+  width: 129px;
+  border-radius: 0 15px 15px 0;
+  position: relative;
+  //右面部分
+  .right-content {
+    // width: 100px;
+    // height: 80px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    // border: 1px solid red;
+
+    .right-number {
+      width: 32px;
+      font-size: 20px;
+      border-radius: 4px;
+      border: 2px solid #999;
+      margin: auto;
+      text-align: center;
+    }
+
+    .right-title {
+      font-weight: 700;
+      font-size: 24px;
+      padding-top: 20px;
+      text-align: center;
+    }
+  }
+}
+//线条
+.right-complete-two::after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  margin: 26px auto;
+  height: 70%;
+  border-left: 1px dashed #595959;
+}

src/pages/PayOrder/index.config.js

@@ -0,0 +1,12 @@
+export default {
+  navigationBarTitleText: '测试页2',
+  navigationStyle: 'custom',
+
+  usingComponents: {
+    "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
+    "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
+    "mp-cells": "weui-miniprogram/cells/cells"
+  }
+
+
+}

src/pages/PayOrder/index.jsx

@@ -0,0 +1,123 @@
+
+import image from '@/assets/icons/ProCard/8kb.jpg'
+import { Button, Radio } from '@tarojs/components'
+
+import food from '@/assets/icons/ProCard/food.png'
+import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
+import CustomNav from '@/components/CustomNav'
+import PPP from '@/components/ProCard'
+import './style.less'
+
+export default () => {
+
+
+
+
+  return (
+
+    <view class='container'>
+      <CustomNav title='订单' />
+      <view class='coupon-list'>
+        <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='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>
+              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
+            </view>
+          </view>
+          <view class='right-complete-two'>
+            <view className='right-content'>
+              <view className='right-number'>×1</view>
+              <view className='right-title'>数量</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>
+            <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>
+              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
+            </view>
+          </view>
+          <view class='right-complete-two'>
+            <view className='right-content'>
+              <view className='right-number'>×1</view>
+              <view className='right-title'>数量</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>
+            <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>
+              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
+            </view>
+          </view>
+          <view class='right-complete-two'>
+            <view className='right-content'>
+              <view className='right-number'>×1</view>
+              <view className='right-title'>数量</view>
+            </view>
+          </view>
+        </view>
+
+      </view>
+      <view className='view-button'>
+        <view className='Card-number-box'>
+          <view className='Card-number'>
+            <text style='left:29px;position: absolute; padding-top:20px'>手机号码:</text>
+            <text style='right:29px;position: absolute;padding-top:20px'>16161312125</text>
+          </view>
+          <view className='Card-user'>
+            <Radio style='padding-left:20px; position: relative; top:24px;' value='我已阅读知晓并同意' >我已阅读知晓并同意 <text style='color:#274190;text-decoration:underline;font-weight:400'>《平台用户服务协议》</text></Radio>
+          </view>
+        </view>
+        <view className='button-box-button-box'>
+          <view className='button-text-image' >
+            <text className='button-text-money-hot'>返现￥2.18</text>
+            <image className='button-image' src={ProCard_hot}>123123</image>
+            <view className='button-text-money'>门店市面价：230元</view>
+          </view>
+          <Button className='button-box-one'>￥170元 <text className='button-text-one'>支付订单</text> </Button>
+        </view>
+
+      </view>
+    </view>
+
+
+  )
+}

src/pages/PayOrder/style.less

@@ -0,0 +1,237 @@
+@whiteColor: #fff;
+@Image-ProCard_hot: "../../assets/icons/ProCard/ProCard_hot.png";
+
+.view-button {
+  // width: 100%;
+  // height: 150px;
+  position: relative;
+
+  .Card-number-box {
+    .Card-number {
+      width: 100%;
+      height: 96px;
+      background-color: @whiteColor;
+    }
+    .Card-user {
+      width: 100%;
+      height: 96px;
+      background-color: @whiteColor;
+    }
+  }
+  .button-box-button-box {
+    position: relative;
+    .button-text-image {
+      width: 144;
+      height: 45px;
+      position: absolute;
+      top: -35px;
+      left: 267px;
+      right: 305px;
+      z-index: 1;
+      .button-text-money-hot {
+        position: absolute;
+        width: 144px;
+        height: 43px;
+        line-height: 43px;
+        font-size: 24px;
+        font-weight: bold;
+        color: @whiteColor;
+      }
+      .button-image {
+        width: 143px;
+        height: 43px;
+      }
+      .button-text-money {
+        position: absolute;
+        margin-top: -8;
+        width: 157px;
+        font-size: 18px;
+        font-weight: 400;
+        text-decoration: line-through;
+        color: @whiteColor;
+      }
+    }
+    .button-box-one {
+      font-size: 30px;
+      line-height: 92px;
+      margin-top: 3em;
+      background-color: #274190;
+      border-radius: 12px;
+      width: 690px;
+      height: 92px;
+      color: @whiteColor;
+      // position: absolute;
+      bottom: 40px;
+      right: 0;
+      left: 0;
+      .button-text-one {
+        right: 133px;
+        font-size: 30px;
+        padding-left: 220px;
+      }
+    }
+  }
+}
+
+.wrapper {
+  display: flex;
+  position: relative;
+  // margin-top: 600px;
+  margin: 30px auto;
+  width: 700px;
+
+  // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+  // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
+  filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
+
+  .left-complete-one {
+    padding-top: 87px;
+    padding-bottom: 43px;
+    position: relative;
+    display: flex;
+    background: @whiteColor;
+    background: radial-gradient(
+          circle at top right,
+          transparent 15px,
+          @whiteColor 0
+        )
+        top right,
+      radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
+        bottom right;
+    background-size: 100% 60%;
+    background-repeat: no-repeat;
+
+    width: 573px;
+    border-radius: 15px 0px 0px 15px;
+    // border-radius: 12px;
+
+    align-items: center;
+    .left-image-1 {
+      width: 145px;
+      height: 44px;
+      position: absolute;
+      top: 22px;
+    }
+    .left-viewText {
+      // background-image: url(@Image-ProCard_hot);
+      // width: 287px;
+      width: auto;
+      height: 44.3px;
+      position: absolute;
+      left: 1px;
+      top: 28px;
+      font-size: 24px;
+      color: @whiteColor;
+      font-weight: 600;
+    }
+    //图片
+    .title-image {
+      width: 145px;
+      margin-left: 20px;
+      border-radius: 24px;
+      overflow: hidden;
+      position: relative;
+      .image-1 {
+        width: 100%;
+        height: 145px;
+      }
+      .image-2 {
+        width: 89px;
+        height: 34px;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
+    // 商品标题
+    .title-content {
+      // padding: 84px 0 56px 20px;
+      padding-left: 18px;
+
+      .Pro-title {
+        .title-text {
+          width: 375px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box; //必须要
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all; /* 多出文本省略号代替 */
+          text-align: left;
+          font-size: 24px;
+          padding-bottom: 10px;
+        }
+      }
+      .title-money {
+        padding-top: 34px;
+        font-size: 24px;
+        // color: red;
+        font-weight: 800;
+      }
+      .title-money-2 {
+        font-size: 18px;
+        color: #666;
+        padding-left: 10px;
+        text-decoration: line-through;
+      }
+
+      .title-time {
+        font-size: 24px;
+        padding-top: 20px;
+        color: #c0c8d3;
+      }
+    }
+  }
+}
+
+.right-complete-two {
+  background: @whiteColor;
+  background: radial-gradient(
+        circle at top left,
+        transparent 15px,
+        @whiteColor 0
+      )
+      top left,
+    radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
+      bottom left;
+  background-size: 100% 60%;
+  background-repeat: no-repeat;
+  width: 129px;
+  border-radius: 0 15px 15px 0;
+  position: relative;
+  //右面部分
+  .right-content {
+    // width: 100px;
+    // height: 80px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    // border: 1px solid red;
+
+    .right-number {
+      width: 32px;
+      font-size: 20px;
+      border-radius: 4px;
+      border: 2px solid #999;
+      margin: auto;
+      text-align: center;
+    }
+
+    .right-title {
+      font-weight: 700;
+      font-size: 24px;
+      padding-top: 20px;
+      text-align: center;
+    }
+  }
+}
+//线条
+.right-complete-two::after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  margin: 26px auto;
+  height: 70%;
+  border-left: 1px dashed #595959;
+}

src/pages/index/index.jsx

@@ -1,5 +1,5 @@
 import React, { Suspense, useState, lazy } from 'react'
-import { View, Text } from '@tarojs/components'
+
 import CustomNav from '@/components/CustomNav'
 import logo from '@/assets/icons/comm/logo_small.png'
 import tabList from './tabbar'
@@ -10,7 +10,7 @@ const Guide = lazy(() => import('./tabs/Guide'))
 const Strategy = lazy(() => import('./tabs/Strategy'))
 const Mine = lazy(() => import('./tabs/Mine'))
 
-export default (props) => {
+export default () => {
   const [currentTab, setCurrentTab] = useState(0)
 
   const handleTabChange = (e) => {

src/pages/index/index.less

@@ -20,11 +20,11 @@
 }
 
 .custom-tabbar {
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.08);
 
   .weui-tabbar__label {
-    color: #C0C8D3;
+    color: #c0c8d3;
   }
 
   .weui-bar__item_on {

src/pages/index/tabs/Guide.jsx

@@ -1,19 +1,154 @@
+import { useState } from "react";
 import Taro from '@tarojs/taro'
-import React from 'react'
-import Card from '@/components/Card'
+import image from '@/assets/icons/ProCard/8kb.jpg'
+import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
+import food from '@/assets/icons/ProCard/food.png'
+import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
+import sleep from '@/assets/icons/GuideCheck/sleep_logo.png'
+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 './GuideCss/style.less'
+
+
+const scoreList = new Array(5).fill(0)
+const score = '3.9'
+
 
 export default (props) => {
+  const [value, setVaule] = useState('已收藏')
+  const [imageSrc, setImageSrc] = useState(starOn)
+
+
+
+
+  const Ac = () => {
+    setImageSrc(starOff)
+    setVaule('加入收藏')
+    // console.log('------------', value);
+
+  }
 
   const handleClick = () => {
     Taro.navigateTo({ url: '/pages/test/index' })
   }
-
+  // onClick={handleClick}
   return (
-    <view onClick={handleClick}>
-      <Card>
 
-      入住指引
-      </Card>
+    <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>
+          <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> */}
+      {/* <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'> */}
+      {/* <view className='right-number'>×1</view> */}
+      {/* <image className='right-image' src={Pay} />
+            <view className='right-title'>支付</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>
+          {/* 评分 */}
+          <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>
+            {/* <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'>
+            {/* <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>
   )
 }

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

@@ -0,0 +1,288 @@
+@whiteColor: #fff;
+
+.page-index {
+  padding: 0 25px;
+}
+.Guide-Home-box {
+  // width: 333333333333px;
+  .Guide-image-text-box {
+    width: 472px;
+    height: 548px;
+    margin: auto;
+    margin-top: 102px;
+    margin-bottom: 103px;
+    .Guide-images {
+      width: 472px;
+      height: 482px;
+    }
+    .Guide-text {
+      width: 268px;
+      font-weight: 400;
+      color: #999;
+      margin: auto;
+      width: 268px;
+      height: 26px;
+      font-size: 26px;
+      padding-top: 20px;
+    }
+  }
+  .Guide-Content-box {
+    .title-image {
+      display: flex;
+      width: 270px;
+      height: 40px;
+      .title-image-cup {
+        width: 32px;
+        height: 32px;
+        margin-top: 10px;
+        padding-right: 10px;
+        align-items: center;
+      }
+
+      .title-title-boss {
+        align-items: center;
+
+        font-size: 32px;
+        font-weight: 800;
+        color: #202020;
+      }
+    }
+  }
+  //卡片---------------
+
+  .wrapper {
+    margin-top: 40px;
+    display: flex;
+    position: relative;
+    // margin-top: 600px;
+    // margin: 30px auto;
+    width: 700px;
+
+    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+    // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
+    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
+    .card-box-star {
+      position: absolute;
+      width: auto;
+      height: 44.3px;
+      position: absolute;
+      left: 200px;
+      top: 28px;
+      font-size: 20px;
+      color: @whiteColor;
+      .card-star-image {
+        padding-left: 6px;
+        width: 21px;
+        height: 21px;
+      }
+      .card-star-text {
+        padding-left: 10px;
+        font-size: 20px;
+        color: #333;
+        font-weight: 700;
+      }
+    }
+
+    .left-complete-one {
+      padding-top: 87px;
+      padding-bottom: 43px;
+      position: relative;
+      display: flex;
+      background: @whiteColor;
+      background: radial-gradient(
+            circle at top right,
+            transparent 15px,
+            @whiteColor 0
+          )
+          top right,
+        radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
+          bottom right;
+      background-size: 100% 60%;
+      background-repeat: no-repeat;
+
+      width: 573px;
+      border-radius: 15px 0px 0px 15px;
+      // border-radius: 12px;
+
+      align-items: center;
+      .left-image-1 {
+        width: 145px;
+        height: 44px;
+        position: absolute;
+        top: 22px;
+      }
+      .left-viewText {
+        // background-image: url(@Image-ProCard_hot);
+        // width: 287px;
+        width: auto;
+        height: 44.3px;
+        position: absolute;
+        left: 1px;
+        top: 28px;
+        font-size: 20px;
+        color: @whiteColor;
+      }
+      //图片
+      .title-image {
+        width: 145px;
+        margin-left: 20px;
+        border-radius: 24px;
+        overflow: hidden;
+        position: relative;
+        .image-1 {
+          width: 100%;
+          height: 145px;
+        }
+        .image-2 {
+          width: 89px;
+          height: 34px;
+          position: absolute;
+          left: 0;
+          top: 0;
+        }
+      }
+      // 商品标题
+      .title-content {
+        // padding: 84px 0 56px 20px;
+        padding-left: 18px;
+
+        .Pro-title {
+          .title-text {
+            width: 375px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            // display: -webkit-box; //必须要
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            // word-break: break-all; /* 多出文本省略号代替 */
+            text-align: left;
+            font-size: 24px;
+            // padding-bottom: 10px;
+          }
+        }
+        .title-money {
+          // padding-top: 34px;
+          font-size: 24px;
+          // color: red;
+          font-weight: 800;
+        }
+        .title-money-2 {
+          font-size: 18px;
+          color: #666;
+          padding-left: 10px;
+          text-decoration: line-through;
+        }
+
+        .title-time {
+          font-size: 24px;
+          // padding-top: 20px;
+          color: #c0c8d3;
+        }
+        .title-position-on {
+          display: flex;
+          font-size: 20px;
+          .title-position {
+            width: 18px;
+            height: 24px;
+            padding-right: 10px;
+            padding-top: 5px;
+          }
+          .title-position-image {
+            align-items: center;
+            font-size: 20px;
+            color: #333;
+          }
+          .title-on {
+            // margin-bottom: 10px;
+            padding-top: 5px;
+            padding-left: 40px;
+            width: 21px;
+            height: 21px;
+            padding-right: 10px;
+          }
+          .title-on-text {
+            align-items: center;
+
+            font-size: 20px;
+            color: #333;
+          }
+        }
+      }
+    }
+  }
+
+  .right-complete-two {
+    background: @whiteColor;
+    background: radial-gradient(
+          circle at top left,
+          transparent 15px,
+          @whiteColor 0
+        )
+        top left,
+      radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
+        bottom left;
+    background-size: 100% 60%;
+    background-repeat: no-repeat;
+    width: 129px;
+    border-radius: 0 15px 15px 0;
+    position: relative;
+    //右面部分
+    .right-content {
+      // width: 100px;
+      height: 120px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      // border: 1px solid red;
+
+      .right-number {
+        // width: 32px;
+        // font-size: 20px;
+        // border-radius: 4px;
+        // border: 2px solid #999;
+        // margin: auto;
+        // text-align: center;
+      }
+      .right-image {
+        // float: convert();
+        width: 35px;
+        height: 34px;
+        margin: 0 auto;
+        align-items: center;
+        margin: auto;
+        padding-left: 8px;
+        // text-align: center;
+      }
+
+      .right-title {
+        font-weight: 700;
+        font-size: 24px;
+        padding-top: 15px;
+        text-align: center;
+      }
+    }
+  }
+  //线条
+  .right-complete-two::after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    margin: 26px auto;
+    height: 70%;
+    border-left: 1px dashed #595959;
+  }
+
+  //攻略卡片.
+  .Raiders-box-one {
+    width: 100%;
+    height: 694px;
+    border: 1px solid red;
+    .Raiders-box {
+      display: inline;
+      border: 1px solid RED;
+      width: 330px;
+      height: 649px;
+    }
+  }
+}