merge

config/dev.js

@@ -5,7 +5,7 @@ module.exports = {
   defineConstants: {
     // HOST: '"http://47.101.36.130:8085"',//测试
     // WSS_HOST: '"wss://47.101.36.130:8085"',
-    HOST: '"https://dev.jinchengjiaye.com"',//测试
+    HOST:  '"https://dev.jinchengjiaye.com"',//测试
     WSS_HOST: '"wss://dev.jinchengjiaye.com"',
     // HOST: '"https://lt.pawoma.cn"',
     // WSS_HOST: '"wss://lt.pawoma.cn"',

src/app.js

@@ -41,10 +41,13 @@ class App extends Component {
     },
     pages: [
       'pages/project/index',
+      'pages/person/customerAnalysis/followUpCustomer/index',
+      'pages/person/customerAnalysis/transactionCustomer/index',
       'pages/shop/index',
       'pages/activity/activity',
       'pages/activity/myActivity',
       'pages/person/index',
+      'pages/person/customerAnalysis/index',
       'pages/person/profile/index',
       'pages/person/profile/detail/index',
       'pages/project/detail/index',

src/components/AddChart.js

@@ -0,0 +1,166 @@
+import Taro, { Component } from "@tarojs/taro";
+import * as echarts from "./ec-canvas/echarts";
+function setChartData(chart, data) {
+  let option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+        textStyle: {
+          color: "#fff"
+        }
+      },
+    },
+    grid: {
+        "borderWidth": 0,
+        "top": 110,
+        "bottom": 95,
+        textStyle: {
+            color: "#fff"
+        }
+    },
+    dataZoom: [
+      {
+        type: 'slider',
+        start: 0,
+        show: false,
+        end: 60,
+      },
+      {
+        type: 'inside',
+        start: 0,
+        end: 60,
+        filterMode: 'filter',
+      },
+    ],
+    xAxis: [{
+        type: "category",
+        axisLine: {
+          lineStyle: {
+            color: '#90979c'
+          }
+        },
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitArea: {
+          show: false
+        },
+        axisLabel: {
+          interval: 0,
+        },
+        data: [1,2,3,4,5,6,7,8,9,10,11,12],
+    }],
+    yAxis: [{
+      type: "value",
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#90979c'
+        }
+      },
+      axisTick: {
+          show: false
+      },
+      axisLabel: {
+          interval: 0,
+      },
+      splitArea: {
+          show: false
+      },
+    }],
+    series: [
+      {
+        name: "女",
+        type: "bar",
+        stack: "总量",
+        barWidth: 10,
+        label: {
+          normal: {
+            show: false,
+            position: 'top',
+            color: '#000'
+          }
+        },
+        itemStyle: {
+          normal: {
+            barBorderRadius: 20,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: '#00cefc'
+            }, {
+              offset: 1,
+              color: '#00cefc'
+            }]),
+          }
+        },
+        data: data.barData,
+      },
+      {
+        name: "男",
+        type: "line",
+        stack: "总量",
+        symbolSize: 10,
+        symbol:'circle',
+        itemStyle: {
+          normal: {
+            color: "green",
+            barBorderRadius: 0,
+            label: {
+              show: false,
+              position: "bottom",
+            }
+          }
+        },
+        data: data.lineData
+      },
+    ]
+  }
+  chart.setOption(option);
+}
+
+export default class AddChart extends Component {
+  config = {
+    usingComponents: {
+      "ec-canvas": "./ec-canvas/ec-canvas"
+    }
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    ec: {
+      lazyLoad: true
+    }
+  };
+
+  refresh(data) {
+    this.Chart.init((canvas, width, height) => {
+      const chart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      setChartData(chart, data);
+      return chart;
+    });
+  }
+
+  refChart = node => (this.Chart = node);
+
+  render() {
+    return (
+      <ec-canvas
+        ref={this.refChart}
+        canvas-id="mychart-area"
+        ec={this.state.ec}
+      />
+    );
+  }
+}

src/components/LineChart.js

@@ -0,0 +1,74 @@
+import Taro, { Component } from "@tarojs/taro";
+import * as echarts from "./ec-canvas/echarts";
+
+function setChartData(chart, data) {
+  let option = {
+    color: ['#3398DB'],
+    xAxis : [
+      {
+        type: 'category',
+        data: [],
+        axisTick: {
+          alignWithLabel: true
+        }
+      }
+    ],
+    yAxis : [
+      {
+        type : 'value'
+      }
+    ],
+    series : []
+  };
+  if (data && data.dimensions && data.measures) {
+    option.xAxis[0].data = data.dimensions.data
+    option.series = data.measures.map(item => {
+      return {
+        ...item,
+        type:'line',
+      }
+    })
+  }
+  chart.setOption(option);
+}
+
+export default class LineChart extends Component {
+  config = {
+    usingComponents: {
+      "ec-canvas": "./ec-canvas/ec-canvas"
+    }
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    ec: {
+      lazyLoad: true
+    }
+  };
+
+  refresh(data) {
+    this.Chart.init((canvas, width, height) => {
+      const chart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      setChartData(chart, data);
+      return chart;
+    });
+  }
+
+  refChart = node => (this.Chart = node);
+
+  render() {
+    return (
+      <ec-canvas
+        ref={this.refChart}
+        canvas-id="mychart-area"
+        ec={this.state.ec}
+      />
+    );
+  }
+}

src/components/MoveChart.js

@@ -0,0 +1,90 @@
+import Taro, { Component } from "@tarojs/taro";
+import * as echarts from "./ec-canvas/echarts";
+
+function setChartData(chart, data) {
+  let option = {
+    tooltip: {
+    },
+    color: ['#3398DB'],
+    xAxis : [
+      {
+        type: 'category',
+        data: [],
+        axisTick: {
+          alignWithLabel: true
+        }
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'slider',
+        start: 0,
+        show: false,
+        end: 50,
+      },
+      {
+        type: 'inside',
+        start: 0,
+        end: 50,
+        filterMode: 'filter',
+      },
+    ],
+    yAxis : [
+      {
+        type : 'value'
+      }
+    ],
+    series : []
+  };
+  if (data && data.dimensions && data.measures) {
+    option.xAxis[0].data = data.dimensions.data
+    option.series = data.measures.map(item => {
+      return {
+        ...item,
+        type:'bar',
+      }
+    })
+  }
+  chart.setOption(option);
+}
+
+export default class MoveChart extends Component {
+  config = {
+    usingComponents: {
+      "ec-canvas": "./ec-canvas/ec-canvas"
+    }
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    ec: {
+      lazyLoad: true
+    }
+  };
+
+  refresh(data) {
+    this.Chart.init((canvas, width, height) => {
+      const chart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      setChartData(chart, data);
+      return chart;
+    });
+  }
+
+  refChart = node => (this.Chart = node);
+
+  render() {
+    return (
+      <ec-canvas
+        ref={this.refChart}
+        canvas-id="mychart-area"
+        ec={this.state.ec}
+      />
+    );
+  }
+}

src/components/ec-canvas/ec-canvas.js

@@ -0,0 +1,132 @@
+import WxCanvas from './wx-canvas';
+import * as echarts from './echarts';
+
+let ctx;
+
+Component({
+  properties: {
+    canvasId: {
+      type: String,
+      value: 'ec-canvas'
+    },
+
+    ec: {
+      type: Object
+    }
+  },
+
+  data: {
+
+  },
+
+  ready: function () {
+    if (!this.data.ec) {
+      console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
+        + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
+      return;
+    }
+
+    if (!this.data.ec.lazyLoad) {
+      this.init();
+    }
+  },
+
+  methods: {
+    init: function (callback) {
+      const version = wx.version.version.split('.').map(n => parseInt(n, 10));
+      const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9)
+        || (version[0] === 1 && version[1] === 9 && version[2] >= 91);
+      if (!isValid) {
+        console.error('微信基础库版本过低，需大于等于 1.9.91。'
+          + '参见：https://github.com/ecomfe/echarts-for-weixin'
+          + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
+        return;
+      }
+
+      ctx = wx.createCanvasContext(this.data.canvasId, this);
+
+      const canvas = new WxCanvas(ctx, this.data.canvasId);
+
+      echarts.setCanvasCreator(() => {
+        return canvas;
+      });
+
+      var query = wx.createSelectorQuery().in(this);
+      query.select('.ec-canvas').boundingClientRect(res => {
+        if (typeof callback === 'function') {
+          this.chart = callback(canvas, res.width, res.height);
+        }
+        else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+          this.chart = this.data.ec.onInit(canvas, res.width, res.height);
+        }
+        else {
+          this.triggerEvent('init', {
+            canvas: canvas,
+            width: res.width,
+            height: res.height
+          });
+        }
+      }).exec();
+    },
+
+    canvasToTempFilePath(opt) {
+      if (!opt.canvasId) {
+        opt.canvasId = this.data.canvasId;
+      }
+
+      ctx.draw(true, () => {
+        wx.canvasToTempFilePath(opt, this);
+      });
+    },
+
+    touchStart(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        this.chart._zr.handler.dispatch('mousedown', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.proxy.processGesture(wrapTouch(e), 'start');
+      }
+    },
+
+    touchMove(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        this.chart._zr.handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.proxy.processGesture(wrapTouch(e), 'change');
+      }
+    },
+
+    touchEnd(e) {
+      if (this.chart) {
+        const touch = e.changedTouches ? e.changedTouches[0] : {};
+        this.chart._zr.handler.dispatch('mouseup', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.dispatch('click', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.proxy.processGesture(wrapTouch(e), 'end');
+      }
+    }
+  }
+});
+
+function wrapTouch(event) {
+  for (let i = 0; i < event.touches.length; ++i) {
+    const touch = event.touches[i];
+    touch.offsetX = touch.x;
+    touch.offsetY = touch.y;
+  }
+  return event;
+}

src/components/ec-canvas/ec-canvas.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

src/components/ec-canvas/ec-canvas.wxml

@@ -0,0 +1,4 @@
+<canvas class="ec-canvas" canvas-id="{{ canvasId }}"
+bindinit="init"
+bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}">
+</canvas>

src/components/ec-canvas/ec-canvas.wxss

@@ -0,0 +1,4 @@
+.ec-canvas {
+  width: 100%;
+  height: 100%;
+}

src/components/ec-canvas/wx-canvas.js

@@ -0,0 +1,97 @@
+export default class WxCanvas {
+  constructor(ctx, canvasId) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+
+    // this._initCanvas(zrender, ctx);
+    this._initStyle(ctx);
+    this._initEvent();
+  }
+
+  getContext(contextType) {
+    if (contextType === '2d') {
+      return this.ctx;
+    }
+  }
+
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  attachEvent () {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  _initCanvas(zrender, ctx) {
+    zrender.util.getContext = function () {
+      return ctx;
+    };
+
+    zrender.util.$override('measureText', function (text, font) {
+      ctx.font = font || '12px sans-serif';
+      return ctx.measureText(text);
+    });
+  }
+
+  _initStyle(ctx) {
+    var styles = ['fillStyle', 'strokeStyle', 'globalAlpha', 
+      'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
+      'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'];
+
+    styles.forEach(style => {
+      Object.defineProperty(ctx, style, {
+        set: value => {
+          if (style !== 'fillStyle' && style !== 'strokeStyle' 
+            || value !== 'none' && value !== null
+          ) {
+            ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
+          }
+        }
+      });
+    });
+
+    ctx.createRadialGradient = () => {
+      return ctx.createCircularGradient(arguments);
+    };
+  }
+
+  _initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown'
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click'
+    }];
+
+    eventNames.forEach(name => {
+      this.event[name.wxName] = e => {
+        const touch = e.touches[0];
+        this.chart._zr.handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
+        });
+      };
+    });
+  }
+}

src/pages/Line/Line.js

@@ -0,0 +1,30 @@
+import Taro, { Component } from "@tarojs/taro";
+import { View } from "@tarojs/components";
+import LineChart from '../../components/LineChart'
+import "./index.scss";
+
+export default class Line extends Component {
+  config = {
+    navigationBarTitleText: "折线图示例"
+  };
+  componentDidMount() {
+    const chartData = {
+      dimensions: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      },
+      measures: [{
+        data: [10, 52, 200, 334, 390, 330, 220]
+      }]
+    }
+    this.lineChart.refresh(chartData);
+  }
+  refLineChart = (node) => this.lineChart = node
+
+  render() {
+    return (
+      <View className="line-chart">
+        <LineChart ref={this.refLineChart} />
+      </View>
+    );
+  }
+}

src/pages/Line/index.scss

@@ -0,0 +1,4 @@
+.line-chart {
+  width: 100%;
+  height: 100vh;
+}

src/pages/More/More.js

@@ -0,0 +1,40 @@
+import Taro, { Component } from "@tarojs/taro";
+import { View } from "@tarojs/components";
+import MoveChart from '../../components/MoveChart'
+import LineChart from '../../components/LineChart'
+import "./index.scss";
+
+
+export default class More extends Component {
+  config = {
+    navigationBarTitleText: "可移动图表示例"
+  };
+  componentDidMount() {
+    const chartData = {
+      dimensions: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      },
+      measures: [{
+        data: [10, 52, 200, 334, 390, 330, 220, 334, 390, 330, 220, 10, 52, 200,]
+      }]
+    }
+    this.moveChart.refresh(chartData);
+    this.lineChart.refresh(chartData);
+  }
+  refMoveChart = (node) => this.moveChart = node
+
+  refLineChart = (node) => this.lineChart = node
+
+  render() {
+    return (
+      <View className='container'>
+        <View className="move-chart">
+          <MoveChart ref={this.refMoveChart} />
+        </View>
+        <View className="move-chart">
+          <LineChart ref={this.refLineChart} />
+        </View>
+      </View>
+    );
+  }
+}

src/pages/More/index.scss

@@ -0,0 +1,7 @@
+.text {
+  text-align: center;
+}
+.move-chart {
+  width: 100%;
+  height: 50vh;
+}

src/pages/news/item.scss

@@ -1,6 +1,5 @@
 @import "@styles/theme.scss";
 .item {
-  padding: 20px 0;
   border-bottom: solid 1px $border-color-light;
   display: flex;
   justify-content: space-between;
@@ -8,10 +7,9 @@
 	margin:0 30px;
 
   &-img {
-    width: 400px;
-    height: 200px;
+    width: 350px;
+    height: 160px;
     margin-right: 30px;
-    border-radius: 10px;
   }
 
   &-con {

src/pages/person/customerAnalysis/analysis.js

@@ -0,0 +1,58 @@
+import Taro, { Component } from '@tarojs/taro';
+import Authorize from '@components/authorize'
+import { View } from "@tarojs/components";
+import MoveChart from '../../components/MoveChart'
+import LineChart from '../../components/LineChart'
+import './index.scss'
+import { AtTabs, AtTabsPane } from 'taro-ui'
+import "taro-ui/dist/style/components/tabs.scss"
+import { savePoint, updatePoint } from '@services/common'
+import { connect } from '@tarojs/redux'
+
+
+@connect(({ user, city }) => ({ user, city }))
+export default class analysis extends Taro.Component {
+
+  config = {
+    navigationBarTitleText: ''
+  }
+
+  state = {
+    current: 0,
+    recordId: undefined, // 埋点ID
+  }
+
+  componentWillUnmount() {
+    const { recordId } = this.state
+    recordId && updatePoint(recordId)
+  }
+
+  handleClick(value) {
+    this.setState({
+      current: value
+    }, )
+  }
+ 
+
+  render() {
+
+    const tabList = [{ title: '新增客户' }, { title: '跟进客户' }, { title: '到访客户' }]
+
+    return (
+      <View>
+        <AtTabs className="tab-bar" current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
+          <AtTabsPane current={this.state.current} index={0} >
+            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签22页一的内容</View>
+          </AtTabsPane>
+          <AtTabsPane current={this.state.current} index={1}>
+            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
+          </AtTabsPane>
+          <AtTabsPane current={this.state.current} index={2}>
+            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
+          </AtTabsPane>
+        </AtTabs>
+
+      </View>
+    )
+  }
+}

src/pages/person/customerAnalysis/followUpCustomer/index.js

@@ -0,0 +1,125 @@
+import Taro, { Component } from '@tarojs/taro';
+import Authorize from '@components/authorize'
+import './index.scss'
+import { savePoint, updatePoint } from '@services/common'
+import { connect } from '@tarojs/redux'
+import { View, Text, Picker } from '@tarojs/components';
+const iconImg = require('@assets/person/icon.png')
+
+@connect(({ user, city }) => ({ user, city }))
+export default class transactionCustomer extends Taro.Component {
+
+  config = {
+    navigationBarTitleText: '跟进客户'
+  }
+
+  state = {
+    list: [
+      { name: '刘丽丽', phone: '15852364821', sex: '1' },
+      { name: '邓亚平', phone: '13160056061', sex: '2' },
+    ],
+    recordId: undefined, // 埋点ID
+    inputValue: '',
+    screenVisible: true,
+    statusList: ['全部状态', '认筹', '到访', '签约'],
+    statusIndex: -1,
+    dateSel: '2018-04-22',
+  }
+
+  componentWillUnmount() {
+    const { recordId } = this.state
+    recordId && updatePoint(recordId)
+  }
+  changeInput = e => {
+    this.setState({
+      inputValue: e.detail.value
+    })
+  }
+  searchBtn() {
+    const palyload = {
+      inputValue: this.state.inputValue
+    }
+    console.log(this.state.inputValue, "inputValue")
+  }
+  screenShow() {
+    this.setState({
+      screenVisible: true,
+    })
+  }
+  chooseStatus(item, inx) {
+    this.setState({
+      statusIndex: inx,
+    })
+    console.log(item, inx, "eeeeeeeeeeee")
+  }
+  onDateChange = e => {
+    console.log(e.detail.value, "e.detail.value")
+    this.setState({
+      dateSel: e.detail.value
+    },
+      console.log(this.state.dateSel, "e.detail.value")
+    )
+
+  }
+  renderScreenBox() {
+    const { statusList, statusIndex, dateSel } = this.state
+    return (
+      <View className="mask">
+        <View className="content">
+          <View style="color:#333;font-size:14px">精准筛选</View>
+          <View className="status-box">
+            {
+              statusList.map((item, index) => (
+                <View className={index == statusIndex ? 'checked' : 'status-item'} onClick={this.chooseStatus.bind(this, item, index)}>{item}</View>
+              ))
+            }
+          </View>
+          <View>
+            <Picker mode='date' onChange={this.onDateChange}>
+              <View className='picker'>
+                当前选择：{dateSel}
+              </View>
+            </Picker>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  render() {
+    const { list, screenVisible } = this.state
+
+    return (
+      <View>
+        <View className="top-screen" onClick={this.screenShow}>
+          精准筛选<Image src={require('@assets/person/screen.png')} className="screen-img"></Image>
+        </View>
+        {screenVisible && this.renderScreenBox()}
+        <View className="search-box">
+          <Input class="input" placeholderClass='placeholder' autoFocus onInput={this.changeInput} placeholder="请输入用户名/手机号" />
+          <Button className="btn" onClick={this.searchBtn} >搜索</Button>
+        </View>
+        <View style="padding:10px">
+          {
+            list.map(item => (
+              <View class="item">
+                <Image src={require('@assets/default-avatar.png')} className='img'></Image>
+                <View className="name">
+                  {item.name}
+                  {
+                    item.sex == '1' && <View style={`margin-left:10px;background-image: url(${iconImg});background-size: 100%;background-position: 0px -20px;width: 18px;height: 18px;`}></View>
+                  }
+                  {
+                    item.sex == '2' && <View style={`margin-left:10px;background-image: url(${iconImg});background-size: 100%;background-position: 0px 0px;width: 18px;height: 18px;`}></View>
+                  }
+                </View>
+                <View className="phone">{item.phone}<View style={`background-image: url(${iconImg});background-size: 100%;background-position: 0px -44px;width: 22px;height: 22px;`}></View> </View>
+                <View className="status">报备</View>
+              </View>
+            ))
+          }
+        </View>
+      </View>
+    )
+  }
+}

src/pages/person/customerAnalysis/followUpCustomer/index.scss

@@ -0,0 +1,124 @@
+@import "@styles/theme.scss";
+.top-screen{
+  height:56px;
+  line-height: 56px;
+  background:#f4f4f4;
+  color: #999;
+  font-size: 24px;
+  text-align: right;
+  padding-right: 30px;
+  .screen-img{
+    width: 24px;
+    height: 24px;
+    margin: 0 0 -4px 4px;
+  }
+}
+.mask {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  z-index: 9999;
+  background:rgba(0,0,0,0.22);
+  .content {
+    width: 100%;
+    height:538px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: #fff;
+    padding: 20px 40px;
+    .status-box{
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      justify-content: space-between;
+      .status-item{
+        flex:0 0 23%;
+        margin:  20px 1%;
+        border: 2px solid $primary-color;
+        height: 56px;
+        line-height: 56px;
+        text-align: center;
+        border-radius: 12px;
+        color: $primary-color;
+      }
+      .checked{
+        flex:0 0 23%;
+        margin:  20px 1%;
+        border: 2px solid $primary-color;
+        height: 56px;
+        line-height: 56px;
+        text-align: center;
+        border-radius: 12px;
+        color: #fff;
+        background-color: $primary-color;
+      }
+    }
+  }
+}
+.search-box{
+  display: flex;
+  align-items: center;
+  padding: 20px 40px;
+  .input{
+    height: 56px;
+    line-height: 56px;
+    width: 84%;
+    background:#f4f4f4;
+    border-radius: 4px 0px 0px 4px;
+    padding: 0 20px;
+    font-size: 22px;
+  }
+  .placeholder{
+    color:#C9C9C9;
+  }
+  .btn{
+    height: 56px;
+    padding: 0;
+    line-height: 56px;
+    width: 16%;
+    text-align: center;
+    background-color: $primary-color; 
+    color: #fff;
+    font-size: 28px;
+    border-radius:0px 4px 4px 0px;
+
+  }
+}
+.item{
+  padding: 20px 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+  justify-content: space-between;
+  box-shadow:0px 2px 0px 0px rgba(0,0,0,0.12);
+  .img{
+    width: 100px;
+    height: 100px;
+    border-radius: 50px;
+  }
+  .name{
+    display: flex;
+    align-items: center;
+    color: #333;
+    font-size: 30px;
+    position: absolute;
+    top:24px;
+    left:120px;
+  }
+  .phone{
+    color: #333;
+    font-size: 30px;
+    position: absolute;
+    bottom:24px;
+    left:120px;
+    display: flex;
+    align-items: center;
+  }
+  .status{
+    color:$primary-color;
+    font-size: 32px;
+  }
+}

src/pages/person/customerAnalysis/index.js

@@ -0,0 +1,69 @@
+import Taro, { Component } from '@tarojs/taro';
+import Authorize from '@components/authorize'
+import './index.scss'
+import { AtTabs, AtTabsPane } from 'taro-ui'
+import "taro-ui/dist/style/components/tabs.scss"
+import { savePoint, updatePoint } from '@services/common'
+import { connect } from '@tarojs/redux'
+import Analysis from './analysis'
+
+@connect(({ user, city }) => ({ user, city }))
+export default class customer extends Taro.Component {
+
+  config = {
+    navigationBarTitleText: '盘客工具'
+  }
+
+  state = {
+    current: 1,
+    recordId: undefined, // 埋点ID
+  }
+
+  componentWillUnmount() {
+    const { recordId } = this.state
+    recordId && updatePoint(recordId)
+  }
+
+  handleClick(value) {
+    this.setState({
+      current: value
+    }, )
+  }
+  toTransactionCustomer() {
+    Taro.navigateTo({
+      url: `/pages/person/customerAnalysis/transactionCustomer/index`
+    })
+  }
+  toFollowUpCustomer() {
+    Taro.navigateTo({
+      url: `/pages/person/customerAnalysis/followUpCustomer/index`
+    })
+  }
+
+  render() {
+    const tabList = [{ title: '客户分析' }, { title: '我的客户' }]
+    return (
+      <AtTabs className="tab-box" current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
+        <AtTabsPane current={this.state.current} index={0} >
+          <View >
+            <Analysis></Analysis>
+          </View>
+        </AtTabsPane>
+        <AtTabsPane current={this.state.current} index={1}>
+          <View style="padding:10px 20px; display: flex;flex-wrap: wrap;align-content: flex-start;justify-content: space-between;">
+            <View className="my-customer" onClick={this.toFollowUpCustomer} style="border-right:1px solid rgba(0,0,0,0.12)">
+              <Image mode="widthFix" src={require('@assets/person/genjin.png')} className='img'></Image>
+              <View className="name">跟进客户</View>
+              <View className="num">33人</View>
+            </View>
+            <View className="my-customer" onClick={this.toTransactionCustomer}>
+              <Image mode="widthFix" src={require('@assets/person/chengjiao.png')} className='img'></Image>
+              <View className="name">成交客户</View>
+              <View className="name">33人</View>
+            </View>
+          </View>
+        </AtTabsPane>
+      </AtTabs>
+    )
+  }
+}

src/pages/person/customerAnalysis/index.scss

@@ -0,0 +1,82 @@
+@import "@styles/theme.scss";
+
+.wrap {
+  background: white;
+  position: relative;
+  height:100vh;
+}
+
+.tab-box{
+  .at-tabs__header{
+    width: 86%;
+    background-color: #fff;
+    box-shadow:0px 4px 12px 0px rgba(0,0,0,0.12);
+    margin: 20px auto 10px auto;
+    border-radius: 44px;
+  }
+  .at-tabs__item{
+    width:50%;
+    flex: none;
+    color: #666;
+    font-size: 28px;
+  }
+  .at-tabs__item--active{
+    color: $primary-color;
+    background-color: #f4f4f4;
+    border-radius: 0 44px 44px 0;
+  }
+  .at-tabs__item-underline{
+    height: 0px;
+  }
+  .at-tabs__underline{
+    height: 0px!important;
+  }
+  .my-customer{
+    flex: 0 0 50%;
+    text-align: center;
+    border-bottom: 2px solid rgba(216,216,216,1);
+    padding: 80px 0;
+    
+    .img{
+      width: 76px;
+    }
+    .name{
+      color: #333;
+      font-size: 30px;
+      line-height: 48px;
+    }
+
+
+  }
+  .tab-bar{
+    margin-top: 50px;
+    .at-tabs__header{
+      width: 80%;
+      background-color: none;
+      box-shadow:none;
+      margin: 0 auto;
+      border-radius: 0;
+      border: none;
+    }
+    .at-tabs__item{
+      width:33.333%;
+      flex: none;
+      color: #666;
+      font-size: 28px;
+    }
+    .at-tabs__item--active{
+      color: $primary-color;
+      background-color: #fff;
+    }
+    .at-tabs__item-underline{
+      height: 2px;
+      background-color: $primary-color;
+      width: 60%;
+      margin-left: 20%;
+    }
+  
+  }
+
+
+}
+

src/pages/person/customerAnalysis/transactionCustomer/index.js

@@ -0,0 +1,59 @@
+import Taro, { Component } from '@tarojs/taro';
+import Authorize from '@components/authorize'
+import './index.scss'
+import { savePoint, updatePoint } from '@services/common'
+import { connect } from '@tarojs/redux'
+// import { getThumbnail } from '@utils/tools'
+const iconImg = require('@assets/person/icon.png')
+
+
+@connect(({ user, city }) => ({ user, city }))
+export default class transactionCustomer extends Taro.Component {
+
+  config = {
+    navigationBarTitleText: '成交客户'
+  }
+
+  state = {
+    list: [
+      { name: '刘丽丽', phone: '15852364821', sex: '1' },
+      { name: '邓亚平', phone: '13160056061', sex: '2' },
+    ],
+    recordId: undefined, // 埋点ID
+  }
+
+  componentWillUnmount() {
+    const { recordId } = this.state
+    recordId && updatePoint(recordId)
+  }
+
+  render() {
+    const { list } = this.state
+
+    return (
+      <View style="padding:10px">
+        {
+
+          list.map(item => (
+            <View class="item">
+
+              <Image src={require('@assets/default-avatar.png')} className='img'></Image>
+              <View className="name">
+                {item.name}
+                {
+                  item.sex == '1' && <View style={`margin-left:10px;background-image: url(${iconImg});background-size: 100%;background-position: 0px -20px;width: 18px;height: 18px;`}></View>
+                }
+                {
+                  item.sex == '2' && <View style={`margin-left:10px;background-image: url(${iconImg});background-size: 100%;background-position: 0px 0px;width: 18px;height: 18px;`}></View>
+                }
+              </View>
+              <View className="phone">{item.phone} </View>
+              <View  style={`background-image: url(${iconImg});background-size: 100%;background-position: 0px -44px;width: 22px;height: 22px;`}></View>
+            </View>
+          ))
+        }
+
+      </View>
+    )
+  }
+}

src/pages/person/customerAnalysis/transactionCustomer/index.scss

@@ -0,0 +1,30 @@
+@import "@styles/theme.scss";
+.item{
+  padding: 20px 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+  justify-content: space-between;
+  box-shadow:0px 2px 0px 0px rgba(0,0,0,0.12);
+  .img{
+    width: 100px;
+    height: 100px;
+    border-radius: 50px;
+  }
+  .name{
+    display: flex;
+    align-items: center;
+    color: #333;
+    font-size: 30px;
+    position: absolute;
+    top:24px;
+    left:120px;
+  }
+  .phone{
+    color: #333;
+    font-size: 30px;
+    position: absolute;
+    bottom:24px;
+    left:120px;
+  }
+}

src/pages/person/menus.js

@@ -33,11 +33,18 @@ const menus = [
     },
     {
       name: '我的主页',
-      url: ({id}) => `/pages/card/index?id=${id}`,
+      url: ({ id }) => `/pages/card/index?id=${id}`,
       icon: icons.homepage,
       extends: undefined,
       userTypes: [CONSULTANT],
     },
+    {
+      name: '盘客工具',
+      url: '/pages/person/customerAnalysis/index',
+      icon: icons.homepage,
+      extends: undefined,
+      userTypes: [CUSTOMER, CONSULTANT],
+    },
     {
       name: '成为经纪人',
       url: '/pages/agent/become/index',

src/pages/policy/index.scss

@@ -7,5 +7,5 @@
   padding:0 40px;
   height:100vh;
   background:white;
-  margin-top:30px;
+  margin-top:20px;
 }

src/pages/policy/item/item.scss

@@ -1,14 +1,13 @@
 @import "@styles/theme.scss";
 .item {
-  padding: 50px 0;
   border-bottom: solid 1px $border-color-light;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   &-img {
-    width: 400px;
-    height: 200px;
+    width: 350px;
+    height: 160px;
     margin-right: 30px;
   }
 
@@ -21,11 +20,14 @@
 
     &__title {
       font-size: $font-size-title;
+      margin-top: 20px;
     }
 
     &__date {
       font-size: $font-size-content;
-      color: $text-color-lighter
+      color: $text-color-lighter;
+      margin-bottom: 20px;
     }
   }
-}
+}
+

src/pages/project/banner/index.js

@@ -2,8 +2,8 @@ import Taro, { Component } from '@tarojs/taro'
 import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
 // import { cdn } from '@constants/api'
 import './index.scss'
-import emptyImg  from '@assets/empty.png'
-import { getThumbnail} from '@utils/tools'
+import emptyImg from '@assets/empty.png'
+import { getThumbnail } from '@utils/tools'
 
 export default class SwiperBanner extends Component {
   static defaultProps = {
@@ -12,13 +12,26 @@ export default class SwiperBanner extends Component {
     style: {
       height: '200px'
     },
-    onClick: function () { }
+    onClick: function () { },
+    current: 0,
   }
 
-  onBannerClick(item) {
+  changeCurrent (event) {
+    console.log(event.detail.current)
+    const current = event.detail.current
+    this.setState(
+      {
+        current: current
+      }
+    )
+    this.props.onChange(current)
+    // event.detail = {current, source}
+  }
+
+  onBannerClick (item) {
     this.props.onClick(item)
   }
-  render() {
+  render () {
     const { list, style, indicatorDots, current } = this.props
     return (
       <View className='home-banner' style={style}>
@@ -26,9 +39,10 @@ export default class SwiperBanner extends Component {
           className='home-banner__swiper'
           circular
           autoplay
+          onChange={this.changeCurrent.bind(this)}
           indicatorDots={indicatorDots}
           indicatorActiveColor='rgb(256,256,256)'
-        >
+        >{console.log(current)}
           {list.map((item, index) => (
             <SwiperItem
               key={index}
@@ -39,12 +53,12 @@ export default class SwiperBanner extends Component {
                 mode="widthFix"
                 style={style}
                 className='home-banner__swiper-item-img'
-                src={getThumbnail(item.image || item.url ||item.img||emptyImg)}
+                src={getThumbnail(item.image || item.url || item.img || emptyImg)}
               />
             </SwiperItem>
           ))}
         </Swiper>
-      </View> 
+      </View>
     )
   }
 }

src/pages/project/detail/index.js

@@ -1,5 +1,5 @@
 import Taro, { Component } from '@tarojs/taro';
-
+import { View, Video } from '@tarojs/components'
 import './index.scss'
 import Banner from '../banner'
 import HelpGroupBanner from '../swiper'
@@ -51,10 +51,11 @@ export default class Index extends Component {
     circumOpts: [],
     curTab: 'Transport',
     recordId: null,
-    posterShow: 'none'
+    posterShow: 'none',
+    current: 1,
   }
 
-  componentWillMount() {
+  componentWillMount () {
     // const { id = '78c3dd489791dc1d29472fa344b08c45' } = this.$router.params
     ready.queue(() => {
       const router = Taro.getStorageSync('router')
@@ -88,7 +89,7 @@ export default class Index extends Component {
     })
   }
 
-  componentWillUnmount() {
+  componentWillUnmount () {
     const { recordId } = this.state
     recordId && updatePoint(recordId)
   }
@@ -163,7 +164,7 @@ export default class Index extends Component {
     })
   }
 
-  loadActivityData() {
+  loadActivityData () {
     const { buildingId } = this.state
     const payload = { pageSize: 999, pageNumber: 1, buildingId }
     queryActivityList(payload).then(res => {
@@ -173,7 +174,7 @@ export default class Index extends Component {
     })
   }
 
-  loadNewsData() {
+  loadNewsData () {
     const { buildingId } = this.state
     const payload = { pageSize: 2, pageNumber: 1, buildingId }
     queryNewsList(payload).then(res => {
@@ -183,11 +184,11 @@ export default class Index extends Component {
     })
   }
 
-  navigateTo(url) {
+  navigateTo (url) {
     Taro.navigateTo({ url: url })
   }
   // 海报预览图
-  previewImage(arr) {
+  previewImage (arr) {
     console.log('arr:' + arr)
     if (arr[0].length > 1) {
       Taro.previewImage({
@@ -214,7 +215,7 @@ export default class Index extends Component {
     })
   }
 
-  openMap() {
+  openMap () {
     const {
       buildingName,
       address,
@@ -241,12 +242,12 @@ export default class Index extends Component {
     })
   }
 
-  toViewAlbum() {
+  toViewAlbum () {
     const { buildingId } = this.state
     this.navigateTo(`/pages/project/album/index?id=${buildingId}`)
   }
 
-  onViewFans() {
+  onViewFans () {
     const { buildingId } = this.state
     this.navigateTo('/pages/card/fans/index?type=item&id=' + buildingId)
   }
@@ -275,7 +276,7 @@ export default class Index extends Component {
     }
   }
 
-  getPhoneNumber(e, item) {
+  getPhoneNumber (e, item) {
     getUserPhone(e, (phoneNumber) => {
       const { userInfo: { person: { personId, nickname, name } } } = this.props
       Taro.navigateTo({
@@ -284,7 +285,7 @@ export default class Index extends Component {
     })
   }
 
-  getPosterData() {
+  getPosterData () {
     return new Promise(resolve => {
       const { posterData } = this.state
       if (posterData.qrcode) {
@@ -355,14 +356,14 @@ export default class Index extends Component {
     })
   }
 
-  handleTelClick(item, e) {
+  handleTelClick (item, e) {
     e.stopPropagation()
     Taro.makePhoneCall({
       phoneNumber: item.phone
     })
   }
 
-  handleChatClick(item, e) {
+  handleChatClick (item, e) {
     e.stopPropagation()
     const { userInfo: { person: { personId, nickname, name } } } = this.props
     Taro.navigateTo({
@@ -370,24 +371,24 @@ export default class Index extends Component {
     })
   }
 
-  handleConsuItemClick(item) {
+  handleConsuItemClick (item) {
     Taro.navigateTo({
       url: `/pages/card/index?id=${item.id}`
     })
   }
 
-  handleMoreClick() {
+  handleMoreClick () {
     // App.zhuge.track('查看置业顾问列表')
     Taro.navigateTo({
       url: `/pages/card/list/index?buildingId=${this.state.buildingId}`
     })
   }
 
-  handleStopPropagation(e) {
+  handleStopPropagation (e) {
     e.stopPropagation()
   }
 
-  toRecomonedPage() {
+  toRecomonedPage () {
     const {
       userInfo: { person: { personType } }
     } = this.props
@@ -403,50 +404,50 @@ export default class Index extends Component {
     }
   }
 
-  toHome() {
+  toHome () {
     Taro.switchTab({
       url: `/pages/project/index`
     })
   }
 
-  HandleCircumTabClick(id) {
+  HandleCircumTabClick (id) {
     this.setState({
       curTab: id
     })
   }
 
-  handleNewsMoreClick() {
+  handleNewsMoreClick () {
     Taro.navigateTo({
       url: `/pages/news/index?buildingId=` + this.state.buildingId
     })
   }
 
-  handNewsItemClick(id) {
+  handNewsItemClick (id) {
     Taro.navigateTo({
       url: '/pages/news/detail/index?id=' + id
     })
   }
 
-  handleActivityMoreClick() {
+  handleActivityMoreClick () {
     Taro.navigateTo({
       url: `/pages/activity/index?buildingId=` + this.state.buildingId
     })
   }
 
-  handActivityItemClick(id) {
+  handActivityItemClick (id) {
     Taro.navigateTo({
       url: '/pages/activity/detail/index?id=' + id
     })
   }
 
-  handlePreviewHxImage(current, urls) {
+  handlePreviewHxImage (current, urls) {
     Taro.previewImage({
       current,
       urls
     })
   }
 
-  handleFavor() {
+  handleFavor () {
     const { buildingId, isSaved } = this.state
     if (isSaved) {
       cancelFavorProject(buildingId).then(res => {
@@ -476,12 +477,12 @@ export default class Index extends Component {
       console.log('活动项目收藏')
     })
   }
-  handleToolsClick() {
+  handleToolsClick () {
     Taro.navigateTo({
       url: `/pages/toolKit/index`
     })
   }
-  moreFloor() {
+  moreFloor () {
     Taro.navigateTo({
       url: `/pages/project/floor/index`
     })
@@ -526,16 +527,16 @@ export default class Index extends Component {
     )
   }
 
-  previewHouseImage(current, urls) {
+  previewHouseImage (current, urls) {
     Taro.previewImage({
       current,
       urls
     })
   }
 
-  renderBuildingProjectTypeList() {
+  renderBuildingProjectTypeList () {
     const { statusOpts } = this.state
-    const { projectDetail: { buildingProjectType = [], status,marketStatus } } = this.props
+    const { projectDetail: { buildingProjectType = [], status, marketStatus } } = this.props
     return (
       <Block>
         {
@@ -587,7 +588,7 @@ export default class Index extends Component {
   }
 
 
-  renderPhotoAlbum() {
+  renderPhotoAlbum () {
     const { projectDetail: { buildingApartment } } = this.props
     const list = buildingApartment.filter(item => item.apartmentType === 'photo')
     const imgList = list.reduce((prev, cur) => {
@@ -614,7 +615,7 @@ export default class Index extends Component {
       </Block>
     )
   }
-  rendercircum() {
+  rendercircum () {
     const { curTab, circumOpts } = this.state
     const { projectDetail } = this.props
     const panel = circumOpts.filter(item => item.key === curTab)[0]
@@ -668,7 +669,7 @@ export default class Index extends Component {
     )
   }
 
-  renderConsuler() {
+  renderConsuler () {
     const { userInfo: { person: { phone } } } = this.props
     const { projectDetail: { consultants = [] } } = this.props
     return (
@@ -722,7 +723,7 @@ export default class Index extends Component {
     )
   }
 
-  renderStatement() {
+  renderStatement () {
     return (
       <View className='statement'>
         免责条款：以上价格仅供参考，具体一房一价的信息以售楼处展示为准。本网显示房屋位置、交通、医疗、教育、商业等配套信息，来源于第三方网络数据，不作为要约，仅供参考，双方具体权利义务应以法律规定及买卖合同约定为准。<br></br>本平台对项目周边文化教育的介绍旨在提供相关信息，并不意味着信息发布方对就学安排作出承诺。相关教育资源就学信息存在调整的可能，应以政府教育主管部门及办学颁布的政策规定为准。
@@ -731,7 +732,7 @@ export default class Index extends Component {
   }
 
 
-  renderHelp() {
+  renderHelp () {
     const { helpList } = this.state
     return (
       <Block>
@@ -752,17 +753,17 @@ export default class Index extends Component {
     )
   }
 
-  handleHelpClick(item) {
+  handleHelpClick (item) {
     Taro.navigateTo({
       url: '/pages/activity/detail/assistance?id=' + item.activityId
     })
   }
-  handleGroupClick(item) {
+  handleGroupClick (item) {
     Taro.navigateTo({
       url: '/pages/activity/detail/assemble?id=' + item.activityId
     })
   }
-  renderGroup() {
+  renderGroup () {
     const { groupList } = this.state
     return (
       <Block>
@@ -784,7 +785,7 @@ export default class Index extends Component {
     )
   }
 
-  renderHouseTypeList() {
+  renderHouseTypeList () {
     const { statusOpts } = this.state
     const { projectDetail: { buildingApartment } } = this.props
     const list = buildingApartment.filter(item => item.apartmentType === 'apart')
@@ -813,7 +814,7 @@ export default class Index extends Component {
                         )
                       }
                       <View className="rest-info">
-                        <View className='house-type__name'><Text style="color:#FA5431;margin-right:10px">{item.buildingArea||''}</Text>{item.apartmentName||''}</View>
+                        <View className='house-type__name'><Text style="color:#FA5431;margin-right:10px">{item.buildingArea || ''}</Text>{item.apartmentName || ''}</View>
                         <View className='construction__area'>
                           <Text>建面{item.buildingArea || ''}m²</Text>
                           {
@@ -832,7 +833,7 @@ export default class Index extends Component {
 
     )
   }
-  renderActivities() {
+  renderActivities () {
     const { activityList } = this.state
     return (
       <Block>
@@ -863,7 +864,7 @@ export default class Index extends Component {
       </Block>
     )
   }
-  renderNews() {
+  renderNews () {
     const { newsList } = this.state
     return (
       <Block>
@@ -895,7 +896,26 @@ export default class Index extends Component {
     )
   }
 
-  render() {
+  renderVideo () {
+    return (
+      <Video
+        style={{
+          height: '278px'
+        }}
+      ></Video>
+    )
+  }
+
+  changeCurrent (current) {
+    console.log('value:', current)
+    this.setState({
+      current: current + 1
+    })
+  }
+
+
+
+  render () {
     const { posterStatus, posterData, loaded } = this.state
     const { projectDetail } = this.props
     const { uvList = {} } = projectDetail
@@ -911,16 +931,25 @@ export default class Index extends Component {
               <View
                 className="pro__banner"
                 onClick={this.previewImage.bind(this, projectDetail.buildingImg)}>
-                <Banner
+                {1 && <View> <Banner
                   list={projectDetail.buildingImg}
                   indicatorDots={false}
+                  // current
+                  onChange={this.changeCurrent.bind(this)}
                   style={{
                     height: '278px'
                   }}
+
                 ></Banner>
-                <Text className="pro__banner-text">共{(projectDetail.buildingImg && projectDetail.buildingImg.length) || 0}张</Text>
+                  <Text className="pro__banner-text">{this.current}/{(projectDetail.buildingImg && projectDetail.buildingImg.length) || 0}</Text></View>}
+
+                <View className='media-btn'>
+                  <View className='video-btn' >视频</View>
+                  <View className='img-btn' >图片</View>
+                </View>
               </View>
 
+
               <ScrollView
                 enableBackToTop
                 className="wrap"

src/pages/project/detail/index.scss

@@ -13,6 +13,37 @@
   width: 100%;
   padding-bottom: 50px;
 
+  .media-btn {
+    position: absolute;
+    width: 184px;
+    height: 64px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 12px;
+    top: 440px;
+    left: 284px;
+    font-size: 30px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    text-align: center;
+    line-height: 64px;
+
+    display: flex;;
+    .video-btn {
+      width: 92px;
+      height: 64px;
+      background: rgba(187, 156, 121, 1);
+      border-radius: 12px 0px 0px 12px;
+      color: rgba(255, 255, 255, 1);
+    }
+
+    .img-btn {
+      width: 92px;
+      height: 64px;
+      color: rgba(53, 53, 53, 1);
+    }
+  }
+
+
   .wrap {
     padding-top: 546px;
     background: transparent;
@@ -25,17 +56,20 @@
     border-top-right-radius: 28px;
   }
 }
-.activity{
+
+.activity {
   background: white;
   padding: 40px 0;
   margin-top: 20px;
+
   .title {
     font-size: 40px;
     font-weight: bold;
     margin: 10px 0 40px 35px;
-    
+
   }
 }
+
 .section {
   background: white;
   padding: 40px 35px;
@@ -121,8 +155,8 @@
   .map-more-btn {
     width: 100%;
     padding: 30px 0;
-    background:rgba(248,248,248,1);
-    border-radius:12px;
+    background: rgba(248, 248, 248, 1);
+    border-radius: 12px;
     text-align: center;
     color: $primary-color;
     font-weight: 500;
@@ -242,7 +276,7 @@
     line-height: 90px;
     border-radius: 8px;
     margin-right: 40px;
-    border:1px solid $primary-color;
+    border: 1px solid $primary-color;
 
     .iconfont {
       color: white;
@@ -258,7 +292,8 @@
   &__right2 {
     margin-right: 20px;
     background: $primary-color;
-    color:#fff;
+    color: #fff;
+
     .text {
       color: #fff;
       font-size: 34px;
@@ -366,6 +401,7 @@
       .favor-btn {
         display: flex;
         align-items: center;
+
         .iconfont {
           font-size: 40px;
           color: #F6B61D;
@@ -429,7 +465,7 @@
         display: flex;
         padding: 30px 4px;
       }
-      
+
 
       &__item {
         padding: 20px 86px 20px 30px;
@@ -438,19 +474,22 @@
         margin-right: 30px;
         position: relative;
         font-size: 32px;
-        .build-bg{
+
+        .build-bg {
           position: absolute;
           width: 100%;
           height: 100%;
-          top:0;
-          left:0;
-          
+          top: 0;
+          left: 0;
+
         }
+
         .row {
           margin-top: 20px;
           display: flex;
           align-items: center;
-          .row-right{
+
+          .row-right {
             margin: 0 50px;
           }
 
@@ -476,24 +515,27 @@
           bottom: 8%;
         }
 
-        .item__status{
+        .item__status {
           position: absolute;
           right: 0;
           top: 0%;
-          background:rgba(246,182,29,1);
+          background: rgba(246, 182, 29, 1);
           border-radius: 0 16px 0 14px;
           padding: 10px 36px;
           color: #fff;
           font-size: 26px;
         }
-        .sale{
-          background:rgba(246,182,29,1);
+
+        .sale {
+          background: rgba(246, 182, 29, 1);
         }
-        .soldout{
-          background:rgba(0,0,0,0.7);
+
+        .soldout {
+          background: rgba(0, 0, 0, 0.7);
         }
-        .waitsale{
-          background-color:$primary-color;
+
+        .waitsale {
+          background-color: $primary-color;
         }
       }
     }
@@ -587,8 +629,8 @@
             height: 52px;
             margin-left: -10px;
             border-radius: 50%;
-            box-shadow:0px 4px 4px 0px rgba(0,0,0,0.14);
-            border:2px solid rgba(255,255,255,1);
+            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.14);
+            border: 2px solid rgba(255, 255, 255, 1);
           }
         }
 
@@ -604,8 +646,8 @@
     .more-btn {
       width: 100%;
       padding: 30px 0;
-      background:rgba(248,248,248,1);
-      border-radius:12px;
+      background: rgba(248, 248, 248, 1);
+      border-radius: 12px;
       text-align: center;
       font-weight: 500;
       color: $primary-color;
@@ -784,12 +826,12 @@
       .house__img-info {
         padding: 70px 30px 80px 30px;
         border-bottom: 1px solid rgba(232, 232, 232, 1);
-        
+
 
         .house__img {
           width: 100%;
           border-radius: 10px;
-          height: 200px!important;
+          height: 200px !important;
         }
       }
 
@@ -806,36 +848,36 @@
       //   font-size: 20px;
       //   border-radius: 20px;
       // }
-      .rest-info{
-        padding: 10px  26px 20px 26px;
-       
-      .house-type__name {
-        font-weight: bold;
-        margin: 10px 0;
-        font-size: 32px;
-      }
+      .rest-info {
+        padding: 10px 26px 20px 26px;
 
-      .house-type__price {
-        color: #000;
-        margin-bottom: 10px;
+        .house-type__name {
+          font-weight: bold;
+          margin: 10px 0;
+          font-size: 32px;
+        }
+
+        .house-type__price {
+          color: #000;
+          margin-bottom: 10px;
 
-        .price__txt {
-          color: #f00;
-          font-size: 35px;
+          .price__txt {
+            color: #f00;
+            font-size: 35px;
+          }
         }
-      }
 
-      .construction__area {
-        color: rgba(0, 0, 0, 0.54);
-        font-size: 25px;
-        height: 80px;
-        display: flex;
-        flex-direction: column;
-        font-size: 28px;
-        text-align: left;
+        .construction__area {
+          color: rgba(0, 0, 0, 0.54);
+          font-size: 25px;
+          height: 80px;
+          display: flex;
+          flex-direction: column;
+          font-size: 28px;
+          text-align: left;
 
+        }
       }
-    }
 
       .house-type__label {
         color: #757575;
@@ -850,7 +892,7 @@
         color: #fff;
         background: $primary-color;
         padding: 10px 36px;
-        border-radius:  16px 0 14px 0;
+        border-radius: 16px 0 14px 0;
         font-size: 24px;
       }
     }