t

src/api/house.js

@@ -111,6 +111,9 @@ export default {
   apiestatelotterypricelist: params => { // 一房一价列表
     return request('/api/estate/lottery/price/list', params)
   },
+  apiestatelotterypriceedit: params => { // 一房一价 编辑
+    return request('/api/estate/lottery/price/edit', params)
+  },
   apiestatelottery2batchinfo: params => { // 一房一价 - 摇号期数详情接口
     return request('/api/estate/lottery2/batch/info', params)
   },

src/app.jsx

@@ -145,6 +145,8 @@ class App extends Component {
           'rentUpload',
           'dtl',
           'roomPrice',
+          'roomPriceXk',
+          // 'roomPriceEdit',
           'roomPriceImg',
           'roomPriceList',
           // 'card/index',

src/pagesHouse/indexDtl.jsx

@@ -847,21 +847,41 @@ class Index extends Component {
     const bg = require('./img/yfyj/yfyj03s.jpg')
     const { curObj } = this.state
     const lotteryObj = curObj.estate_lottery || {}
+    const { userInfo } = this.state
+    const uInfo = userInfo || Taro.getStorageSync('APP_userInfo')
     return (
       <View className="scoped-entry-yh">
-        <Navigator url={`/pagesRoom/roomPrice?eId=${curObj.id}&name=${curObj.estate_name}&id=${lotteryObj.id}`} className="sey-wrap">
-          <View className="sey-p1">
-            <Image className="i" src={i1}></Image>
-            <View className="t">{lotteryObj.under_way}</View>
-          </View>
-          <View className="sey-p1">
-            <Image className="i" src={i2}></Image>
-            <View className="t2">{lotteryObj.lottery_time}</View>
-          </View>
-          <View className="sey-img">
-            <Image className="img" src={bg}></Image>
-          </View>
-        </Navigator>
+        {
+          uInfo.is_sale == 1 && curObj.sale_ctrl == 1
+          ?
+          <Navigator url={`/pagesRoom/roomPriceXk?eId=${curObj.id}&name=${curObj.estate_name}&id=${lotteryObj.id}`} className="sey-wrap">
+            <View className="sey-p1">
+              <Image className="i" src={i1}></Image>
+              <View className="t">{lotteryObj.under_way}</View>
+            </View>
+            <View className="sey-p1">
+              <Image className="i" src={i2}></Image>
+              <View className="t2">{lotteryObj.lottery_time}</View>
+            </View>
+            <View className="sey-img">
+              <Image className="img" src={bg}></Image>
+            </View>
+          </Navigator> 
+          : 
+          <Navigator url={`/pagesRoom/roomPrice?eId=${curObj.id}&name=${curObj.estate_name}&id=${lotteryObj.id}`} className="sey-wrap">
+            <View className="sey-p1">
+              <Image className="i" src={i1}></Image>
+              <View className="t">{lotteryObj.under_way}</View>
+            </View>
+            <View className="sey-p1">
+              <Image className="i" src={i2}></Image>
+              <View className="t2">{lotteryObj.lottery_time}</View>
+            </View>
+            <View className="sey-img">
+              <Image className="img" src={bg}></Image>
+            </View>
+          </Navigator> 
+        }
       </View>
     )
   }
@@ -872,6 +892,8 @@ class Index extends Component {
     const bg = require('./img/yfyj/yfyj03s.jpg')
     let lotteryImg = []
     if (lotteryObj.lottery_img) lotteryImg = lotteryObj.lottery_img.split(',')
+    const { userInfo } = this.state
+    const uInfo = userInfo || Taro.getStorageSync('APP_userInfo')
     return (
       <View className="scoped-yh">
         <View className="sy-wrap">
@@ -900,9 +922,17 @@ class Index extends Component {
               </View> */}
             </View>
           }
-          <Navigator url={`/pagesRoom/roomPrice?eId=${curObj.id}&name=${curObj.estate_name}&id=${lotteryObj.id}`} className="sy-img">
-            <Image className="img" src={bg}></Image>
-          </Navigator>
+          {
+            uInfo.is_sale == 1 && curObj.sale_ctrl == 1
+            ?
+            <Navigator url={`/pagesRoom/roomPriceXk?eId=${curObj.id}&name=${curObj.estate_name}&id=${lotteryObj.id}`} className="sy-img">
+              <Image className="img" src={bg}></Image>
+            </Navigator>
+            :
+            <Navigator url={`/pagesRoom/roomPrice?eId=${curObj.id}&name=${curObj.estate_name}&id=${lotteryObj.id}`} className="sy-img">
+              <Image className="img" src={bg}></Image>
+            </Navigator>
+          }
         </View>
       </View>
     )

src/pagesRoom/roomPriceXk.jsx

@@ -0,0 +1,444 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import LoginJudge from '@/c/login/Judge'
+import { arrToObj } from '@utils'
+import { AtTabs } from 'taro-ui'
+
+import Chat from '@/c/chat/com'
+import './roomPriceXk.scss'
+
+class Index extends Component {
+  onShareAppMessage() {
+    const {eId, id, name} = this.$router.params
+    return {
+      title: `来看看${name}的一房一价表`,
+      path: `/pagesRoom/roomPrice?eId=${eId}&id=${id}&name=${name}`,
+    }
+  }
+  onShareTimeline () {
+    const {eId, id, name} = this.$router.params
+    return {
+      title: `来看看${name}的一房一价表`,
+      path: `/pagesRoom/roomPrice?eId=${eId}&id=${id}&name=${name}`,
+    }
+  }
+
+  constructor (props) {
+    super(props)
+    const {eId: curId} = this.$router.params
+    this.state = {
+      curId,
+      curObj: {},
+      curNav: 0,
+      roomArr: [],
+      curRoomObj: {},
+      houseSaleStateArr: ['未售', '小定', '已定', '已售'],
+      isDtlShow: false,
+      buildingNumList: [],
+    }
+  }
+
+  config = {
+    navigationBarTitleText: '一房一价表',
+    navigationBarBackgroundColor: '#369af7',
+    navigationBarTextStyle: 'white'
+  }
+
+  componentWillMount () {
+    Taro.$AHU(this)
+    // const { name } = this.$router.params
+    // Taro.setNavigationBarTitle({
+    //   title: name + '-一房一价表' || '一房一价表'
+    // })
+    const {eId, id} = this.$router.params
+    Taro.api.house.apiestatelottery2batchinfo({
+      lottery_id: id,
+      estate_id: eId,
+    }).then(res => {
+      let ll = res.lottery_list || []
+      let buildingNumList = []
+      ll.forEach(item => {
+        const arr = item.building_num.split(',')
+        arr.forEach(sub => {
+          buildingNumList.push({
+            id: item.id,
+            title: sub,
+            lottery_time: item.lottery_time
+          })
+        })
+      })
+      this.setState({
+        buildingNumList,
+        curObj: res || {}
+      }, () => {
+        this.getDtl()
+      })
+    })
+  }
+
+  getDtl = () => {
+    const { curNav, buildingNumList } = this.state
+    const {eId, name, id} = this.$router.params
+    Taro.api.house.apiestatelotterypricelist({
+      estate_id: eId,
+      lottery_id: buildingNumList[curNav].id,
+      building_num: buildingNumList[curNav].title,
+    }).then(res => {
+      this.setState({
+        roomArr: res || []
+      })
+      if (this.subChat) {
+        this.subChat.getData({name, id: eId}, 'pt')
+      }
+    })
+  }
+  onceGetInfo () {
+    const {eId} = this.$router.params
+    const { curObj, curNav, buildingNumList } = this.state
+    if (curObj.id === buildingNumList[curNav].id) {
+      return
+    }
+    Taro.api.house.apiestatelottery2batchinfo({
+      lottery_id: buildingNumList[curNav].id,
+      estate_id: eId,
+    }).then(res => {
+      this.setState({
+        curObj: res || {}
+      })
+    })
+  }
+
+  refChat = (ref) => {
+    this.subChat = ref
+  }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  renderTop () {
+    const {eId, id, name} = this.$router.params
+    const curParams = `eId=${eId}&id=${id}&name=${name}`
+    const { curObj, curNav, buildingNumList } = this.state
+    const nameIcon = require('./img/yfyj/yfyj04.png')
+    const i1 = require('./img/yfyj/yfyj05.png')
+    const i2 = require('./img/yfyj/yfyj06.png')
+    const op1 = require('./img/yfyj/yfyj_icon1.png')
+    const op2 = require('./img/yfyj/yfyj_icon2.png')
+    const op3 = require('./img/yfyj/yfyj_icon3.png')
+    const op4 = require('./img/yfyj/yfyj_icon4.png')
+    const bg = require('./img/yfyj/bg.jpg')
+    return (
+      <View className="scoped-header">
+        <View className="scoped-top">
+          <Image src={bg} className="bg"></Image>
+          <View className="st-wrap">
+            <View className="st-header">
+              <View className="text">
+                <Image src={nameIcon} className="i"></Image>
+                <View className="t">{name}</View>
+              </View>
+              <View className="r" onClick={this.urlDtlLink.bind(this)}>返回楼盘详情</View>
+            </View>
+            <View className="st-p1">
+              <Image className="i" src={i1}></Image>
+              <View className="t">{curObj.under_way}</View>
+            </View>
+            <View className="st-p1">
+              <Image className="i" src={i2}></Image>
+              <View className="t2">{curObj.lottery_time}</View>
+            </View>
+            <View className="st-p2">
+              <Image src={op1} className="op1" onClick={this.urlLink.bind(this, '/pagesRoom/roomPriceList', curParams)}></Image>
+              <Image src={op2} className="op2" onClick={this.urlLink.bind(this, '/pagesRoom/roomPriceImg', curParams)}></Image>
+              <Image src={op3} className="op3" onClick={this.previewImageHandle.bind(this, curObj.project_img, [curObj.project_img])}></Image>
+              <Image src={op4} className="op4" onClick={this.previewQrcodeImageHandle.bind(this, 'http://icon.honglounews.com/ncfxw2.jpg', ['http://icon.honglounews.com/ncfxw2.jpg'])}></Image>
+            </View>
+            {this.renderQrcode()}
+          </View>
+        </View>
+        <View className="sh-nav">
+          <AtTabs
+            current={curNav}
+            scroll
+            tabList={buildingNumList}
+            onClick={this.navClick.bind(this)}>
+          </AtTabs>
+        </View>
+      </View>
+    )
+  }
+  urlLink (u, params) {
+    if (u === 'dev') {
+      Taro.$msg('开发中~敬请期待')
+    } else {
+      let url = u
+      if (params) url += `?${params}`
+      Taro.navigateTo({
+        url
+      })
+    }
+  }
+  navClick (value) {
+    this.setState({
+      curNav: value
+    }, () => {
+      this.getDtl()
+      this.onceGetInfo()
+    })
+  }
+  renderQrcode () {
+    const qrcodeImg = 'http://icon.honglounews.com/miniqrcode.jpg'
+    return (
+      <Image src={qrcodeImg} className="scoped-qrcode"  onClick={this.previewQrcodeImageHandle.bind(this, qrcodeImg, [qrcodeImg])} />
+    )
+  }
+  previewQrcodeImageHandle (current, urls) {
+    Taro.previewImage({
+      current,
+      urls
+    })
+  }
+  //  
+  urlDtlLink () {
+    const { eId } = this.$router.params
+    Taro.navigateTo({url: '/pagesHouse/indexDtl?id=' + eId + '&YH=zzyh'})
+  }
+
+  renderInfo () {
+    const { roomArr } = this.state
+    let cArr = roomArr || []
+    const htArr = cArr[0] ? cArr[0].data : []
+    const htArrIndex = htArr.length
+    const htitems = htArr.map((item, index) => {
+      let boxClassStr = `'srp-col num'${htArrIndex}`
+      return (
+        <View className={boxClassStr} key={index}>
+          <View className="srp-ht">
+            <View className="srp-img">
+              <Image src={item.house_img + '_xs'} className="img" onClick={this.previewImageHandle.bind(this, item.house_img, [item.house_img])}/>
+              <View className="tips">
+                <View className="bg"></View>
+                <View className="t">查看大图</View>
+              </View>
+            </View>
+            <View className="p1">{item.house_type}</View>
+            <View className="p2">{item.built}㎡</View>
+            {
+              item.house_rate === '100%'
+              ? ''
+              : 
+              <View className="p2">得房率:{item.house_rate}</View>
+            }
+          </View>
+        </View>
+      )
+    })
+    return (
+      <View className="scoped-room-price">
+        <View className="srp-row">
+          <View className="srp-col">户型图</View>
+          {htitems}
+        </View>
+        {
+          cArr.map((one, oIndex) => {
+            return (
+              <View className="srp-row" key={oIndex}>
+                <View className="srp-col">{one.storey}层</View>
+                {
+                  one.data.map((two, tIndex) => {
+                    const oneDataLength = one.data.length
+                    let boxClassStr2 = `'srp-col num'${oneDataLength}`
+                    if (two.house_sale_state === '小定') boxClassStr2 = `'srp-col t2 num'${oneDataLength}`
+                    if (two.house_sale_state === '已定') boxClassStr2 = `'srp-col t3 num'${oneDataLength}`
+                    if (two.house_sale_state === '已售') boxClassStr2 = `'srp-col t4 num'${oneDataLength}`
+                    return (
+                      <View className={boxClassStr2} key={tIndex} onClick={this.openDtlPopup.bind(this, two)}>
+                        {
+                          two.house_sale_state === '小定' || two.house_sale_state === '已定' || two.house_sale_state === '已售'
+                          ? 
+                          <View className="srp-tag">{two.house_sale_state}</View>
+                          : ''
+                        }
+                        <View className="srp-room">
+                          <View className="srpr-p1">{two.room}
+                            <View className="s">{'>>'}</View>
+                          </View>
+                          <View className="srpr-p2">{two.built}㎡</View>
+                          <View className="srpr-p2">￥{parseInt(two.sale)}/㎡</View>
+                          <View className="srpr-p2">总价:{(Number(two.price) / 10000).toFixed(1)}万</View>
+                        </View>
+                      </View>
+                    )
+                  })
+                }
+              </View>
+            )
+          })
+        }
+      </View>
+    )
+  }
+  previewImageHandle (cur, arr) {
+    const current = `${cur}_plus`
+    const urls = arr.map(item => {
+      return `${item}_plus`
+    })
+    Taro.previewImage({
+      current,
+      urls
+    })
+  }
+
+
+  renderDtl () {
+    const { isDtlShow, curRoomObj, houseSaleStateArr } = this.state
+    let boxClassStr = 'p2 t1'
+    if (curRoomObj.house_sale_state === '小定') boxClassStr = `'p2 t2`
+    if (curRoomObj.house_sale_state === '已定') boxClassStr = `'p2 t3`
+    if (curRoomObj.house_sale_state === '已售') boxClassStr = `'p2 t4`
+    
+    let newTotalPrice = curRoomObj.price
+    if (curRoomObj.house_discount) {
+      const hdArr = curRoomObj.house_discount.split(',')
+      hdArr.forEach(dis1 => {
+        const oneStr = dis1.substr(0,1)
+        const otherStr = dis1.substr(1,dis1.length)
+        if (oneStr === '*'){
+          newTotalPrice = (Number(newTotalPrice * otherStr).toFixed(2))
+        }
+        if (oneStr === '-'){
+          newTotalPrice = (Number(newTotalPrice - otherStr).toFixed(2))
+        }
+        if (oneStr === '+'){
+          newTotalPrice = (Number(newTotalPrice + otherStr).toFixed(2))
+        }
+      })
+    }
+    let newOnePrice = Number(newTotalPrice / curRoomObj.built).toFixed(2)
+    return (
+      <View className={isDtlShow ? 'l-modal-box' : 'l-modal-box hide'}>
+        <View className='lmb-bg'></View>
+        <View className='lmb-body'>
+          <View className="scoped-dtl">
+            <View className="sd-img">
+              <Image src={curRoomObj.house_img + '_xs'} className="img" onClick={this.previewImageHandle.bind(this, curRoomObj.house_img, [curRoomObj.house_img])}/>
+              <View className="tips">
+                <View className="bg"></View>
+                <View className="t">查看大图</View>
+              </View>
+            </View>
+            <View className="sd-p">
+              <View className="p2">{curRoomObj.house_type}</View>
+              <View className="p2">{curRoomObj.building_num}</View>
+              <View className="p2">房号:{curRoomObj.room}</View>
+              <View className="p2">层高:{curRoomObj.floor_height}</View>
+              <View className="p2">建筑面积:{curRoomObj.built}㎡</View>
+              <View className="p2">套内面积:{curRoomObj.built === curRoomObj.space ? '未知' : curRoomObj.space}㎡</View>
+              <View className="p2">公摊面积:{curRoomObj.built === curRoomObj.space ? '未知' : curRoomObj.sharing}㎡</View>
+              <View className="p2">得房率:{curRoomObj.built === curRoomObj.space ? '未知' : curRoomObj.house_rate}</View>
+              <View className="p2">毛坯:{curRoomObj.blank}元/㎡</View>
+              <View className="p2">装修:{curRoomObj.decoration}元/㎡</View>
+              <View className="p2">单价:{curRoomObj.sale}元/㎡</View>
+              <View className="p2">总价:{curRoomObj.price}元</View>
+            </View>
+            <View className="sd-label">销控数据
+              
+            </View>
+            <View className="sd-p">
+              <View className={boxClassStr}>
+
+              <Picker mode='selector' range={houseSaleStateArr} onChange={this.onSaleStateChange}>
+              {curRoomObj.house_sale_state}<View className="s">{'修改>>'}</View>
+              </Picker>
+
+              </View>
+              <View className="p2">折扣：
+                <Input type='text' placeholder='请输入' value={curRoomObj.house_discount} onInput={this.inputCHnage.bind(this, 'house_discount')} />
+              </View>
+              <View className="p2">备注：
+                <Textarea placeholder='请输入' style='background:#fff;width:100%;min-height:50px;padding:0 30rpx;box-sizing: border-box;text-align: left;color: #666;' value={curRoomObj.house_sale_remark} autoHeight/>
+              </View>
+              <View className="p2">
+                <View className="s">折后总价：{newTotalPrice || '暂无'}元</View>
+                <View className="s">折后单价：{newOnePrice || '暂无'}元/㎡</View>
+              </View>
+            </View>
+            <View className="l-floor-footer t2">
+              <View className="lff-flex">
+                <View className="lff-btn t3" onClick={this.closeRulePopup.bind(this)}>关闭</View>
+                <View className="lff-btn t2" onClick={this.closeRulePopup.bind(this, 'edit')}>保存</View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+  inputCHnage (str, e) {
+    let { curRoomObj } = this.state
+    curRoomObj[str] = e.target.value
+    this.setState({
+      curRoomObj
+    })
+  }
+
+  // const { valStr, bc } = this.props
+    // bc(valStr, strTrim())
+  onSaleStateChange = e => {
+    let { curRoomObj, houseSaleStateArr } = this.state
+    curRoomObj.house_sale_state = houseSaleStateArr[e.detail.value]
+    this.setState({
+      curRoomObj
+    })
+  }
+  
+  openDtlPopup (item) {
+    this.setState({
+      curRoomObj: item,
+      isDtlShow: true
+    })
+  }
+  closeRulePopup (str) {
+    this.setState({
+      curRoomObj: {},
+      isDtlShow: false
+    })
+    if (str === 'edit') {
+      let { curRoomObj } = this.state
+      let house_discount = curRoomObj.house_discount.replace(/，|、|\/|\\/g, ',')
+      Taro.api.house.apiestatelotterypriceedit({
+        id: curRoomObj.id,
+        house_sale_state: curRoomObj.house_sale_state,
+        house_sale_remark: curRoomObj.house_sale_remark || '',
+        house_discount,
+      }).then(res => {
+        this.getDtl()
+      })
+    }
+  }
+
+  renderShare () {
+    const iconShare = require('@img/images/icon_g_share6.png')
+    return (
+      <Button className="g-icon-share btn-to-div" openType="share">
+        <Image className="img" src={iconShare} />
+      </Button>
+    )
+  }
+
+  render () {
+    return (
+      <View className="l-box">
+        <LoginJudge />
+        {this.renderTop()}
+        {this.renderInfo()}
+        {this.renderDtl()}
+        {this.renderShare()}
+        <Chat onRef={this.refChat} />
+      </View>
+    )
+  }
+}
+
+export default Index

src/pagesRoom/roomPriceXk.scss

@@ -0,0 +1,390 @@
+@import '@css/mixin.scss';
+@import '@css/modal.scss';
+.l-box {
+  padding-bottom: 140px;
+}
+.scoped-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 750px;
+  height: 450px;
+  box-shadow: 0 6px 6px #ccc;
+  background: #fff;
+  .sh-nav {
+    height: 88px;
+  }
+}
+.scoped-top {
+  width: 750px;
+  height: 362px;
+  position: relative;
+  .bg {
+    position: absolute;
+    width: 750px;
+    height: 362px;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+  .st-wrap {
+    position: absolute;
+    width: 750px;
+    height: 362px;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    box-sizing: border-box;
+    padding: 20px;
+    color: #fff;
+  }
+  .scoped-qrcode {
+    position: absolute;
+    right: 20px;
+    top: 120px;
+    width: 200px;
+    height: 200px;
+  }
+  .st-header {
+    height: 80px;
+    position: relative;
+    padding: 10px 0 0 20px;
+    box-sizing: border-box;
+    border-bottom: 1PX solid #59a1e3;
+    margin-bottom: 20px;
+    .i {
+      display: inline-block;
+      vertical-align: top;
+      width: 30px;
+      height: 30px;
+      margin-right: 10px;
+    }
+    .t {
+      display: inline-block;
+      vertical-align: top;
+      font-size: 30px;
+      font-weight: bold;
+    }
+    .r {
+      position: absolute;
+      top: 10px;
+      right: 0;
+      width: 180px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      font-size: 24px;
+      color: $mainColor;
+      border-radius: 20px;
+      background: #fff;
+    }
+  }
+  .st-p1 {
+    width: 480px;
+    display: flex;
+    margin-bottom: 20px;
+    .t2 {
+      display: inline-block;
+      vertical-align: top;
+      flex: 1;
+      line-height: 30px;
+      color: #fff;
+      font-size: 24px;
+    }
+    .t {
+      display: inline-block;
+      vertical-align: top;
+      flex: 1;
+      line-height: 30px;
+      color: #fff;
+      font-size: 28px;
+      font-weight: bold;
+    }
+    .i {
+      display: inline-block;
+      vertical-align: top;
+      width: 30px;
+      height: 30px;
+      margin-right: 10px;
+    }
+  }
+  .st-p2 {
+    display: flex;
+    flex-wrap: wrap;
+    width: 480px;
+    .op1 {
+      width: 176px;
+      height: 46px;
+      margin-right: 20px;
+      margin-bottom: 10px;
+    }
+    .op2 {
+      width: 198px;
+      height: 46px;
+      margin-right: 20px;
+      margin-bottom: 10px;
+    }
+    .op3 {
+      width: 158px;
+      height: 46px;
+      margin-right: 20px;
+    }
+    .op4 {
+      width: 238px;
+      height: 46px;
+    }
+  }
+}
+
+
+.scoped-room-price {
+  padding-top: 460px;
+  .srp-row {
+    display: flex;
+  }
+  .srp-col {
+    width: 170px;
+    background: #fff8eb;
+    border-bottom: 1PX solid #fff;
+    border-right: 1PX solid #fff;
+    text-align: center;
+    box-sizing: border-box;
+    position: relative;
+    .srp-tag {
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: #fff;
+      font-size: 20px;
+    }
+    &.t2 {
+      background-color: #ffc107;
+      .srpr-p1 {
+        color: #fff!important;
+        .s {
+          color: #fff!important;
+        }
+      }
+      .srpr-p2 {
+        color: #fff!important;
+      }
+    }
+    &.t3 {
+      background-color: #9e9e9e;
+      .srpr-p1 {
+        color: #fff!important;
+        .s {
+          color: #fff!important;
+        }
+      }
+      .srpr-p2 {
+        color: #fff!important;
+      }
+    }
+    &.t4 {
+      background-color: #f44336;
+      .srpr-p1 {
+        color: #fff!important;
+        .s {
+          color: #fff!important;
+        }
+      }
+      .srpr-p2 {
+        color: #fff!important;
+      }
+    }
+    &.num2 {
+      width: 340px;
+    }
+    &.num3 {
+      width: 226px;
+    }
+    &.num1 {
+      width: 680px;
+    }
+    &:nth-child(1) {
+      width: 70px;
+      background: #eceff6;
+      box-sizing: border-box;
+      padding: 70px 20px 0;
+      font-size: 24px;
+      color: #9b9b9b;
+    }
+  }
+  .srp-ht {
+    padding: 10px 0;
+    .p1 {
+      font-size: 24px;
+      font-weight: bold;
+      color: #313131;
+    }
+    .p2 {
+      font-size: 20px;
+      color: $mainColor;
+    }
+  }
+  .srp-img {
+    display: inline-block;
+    width: 120px;
+    height: 120px;
+    text-align: center;
+    position: relative;
+    .img {
+      width: 100px;
+      height: 100px;
+    }
+    .tips {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 40px;
+      width: 100%;
+      .bg {
+        position: absolute;
+        width: 100%;
+        height: 40px;
+        left: 0;
+        bottom: 0;
+        background: #000;
+        opacity: .2;
+        z-index: 1;
+      }
+      .t {
+        position: absolute;
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        left: 0;
+        bottom: 0;
+        color: #fff;
+        z-index: 1;
+        font-size: 20px;
+      }
+    }
+  }
+  .srp-room {
+    padding: 20px 0 10px;
+    .srpr-p1 {
+      display: block;
+      font-size: 30px;
+      font-weight: bold;
+      color: #313131;
+      padding-bottom: 10px;
+      .s {
+        display: inline-block;
+        vertical-align: top;
+        font-size: 20px;
+        text-decoration: underline;
+        color: #999;
+        margin-left: -8px;
+        padding-top: 6px;
+      }
+    }
+    .srpr-p2 {
+      display: block;
+      font-size: 22px;
+      color: #e94141;
+      padding-bottom: 6px;
+    }
+  }
+}
+
+
+.scoped-dtl {
+  position: relative;
+  width: 700px;
+  background: #fff;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 20px;
+  border-radius: 20px;
+  .sd-img {
+    display: inline-block;
+    border: 1PX solid #f2f2f2;
+    width: 400px;
+    height: 200px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    .img {
+      width: 400px;
+      height: 400px;
+    }
+    .tips {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 40px;
+      width: 100%;
+      .bg {
+        position: absolute;
+        width: 100%;
+        height: 40px;
+        left: 0;
+        bottom: 0;
+        background: #000;
+        opacity: .2;
+        z-index: 1;
+      }
+      .t {
+        position: absolute;
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        left: 0;
+        bottom: 0;
+        color: #fff;
+        z-index: 1;
+        font-size: 20px;
+      }
+    }
+  }
+  .sd-label {
+    text-align: center;
+    padding: 20px 0 10px;
+    font-weight: bold;
+    .s {
+      font-weight: normal;
+      color: #666;
+      text-decoration: underline;
+    }
+  }
+  .sd-p {
+    margin: 20px auto;
+    width: 600px;
+    display: flex;
+    flex-wrap: wrap;
+    .p {
+      width: 100%;
+      font-size: 24px;
+    }
+    .p2 {
+      width: 50%;
+      font-size: 24px;
+      padding: 10px 0;
+      border-bottom: 1PX solid #f2f2f2;
+      border-right: 1PX solid #f2f2f2;
+      box-sizing: border-box;
+      &:nth-child(2n) {
+        border-right: 0;
+      }
+      &.t1 {
+        color: #666;
+        font-weight: bold;
+      }
+      &.t2 {
+        color: #ffc107;
+        font-weight: bold;
+      }
+      &.t3 {
+        color: #9e9e9e;
+        font-weight: bold;
+      }
+      &.t4 {
+        color: #f44336;
+        font-weight: bold;
+      }
+    }
+  }
+}