
<template>
  <div>
    <div class="TravelFeature" :class="{'foldHeight':isFold==1}">
      <span class="TMTitle">
        <i></i>{{$t('sm.chanpintese')}}
      </span>
      <span class="foldList" @click="fold" v-if="isFold==''">{{$t('sm.djzd')}}</span>
      <span class="foldList" @click="fold" v-if="isFold==1">{{$t('sm.djzk')}}</span>
      <div class="TrfList clearfix">
        <div
          class="TFslide"
          v-for="item in TypeArray"
          :class="{'TFcked':item.isShow}"
          @click="clickFeature(item)"
          :key="item.subCode"
        >
          <img v-bind:src="item.imgUrl">
          <div>{{item.ckTitle}}</div>
        </div>
      </div>
      <div>{{$t('sm.huandengplongTips')}}</div>
      <div class="ScraList">{{$t('sm.imgLongtips')}}</div>
      <div class="TFContent" style="overflow-x:auto;">
        <div class="TFconTitle">
          <span>{{ckTitle}}</span>
          <div class="TFBTline"></div>
        </div>
        <div class="TFchildContent clearfix">
          <div class="TFLeft" v-if="FeatureData.FeatureType==FeatureTypeState.nineGrid">
            <span>{{$t('sm.xiaoguoyldzxg')}}</span>
            <div class="nineGrid clearfix">
              <div
                class="TFimgList"
                v-for="(item,index) in FeatureData.fileList"
                :key="item.subCode"
              >
                <img v-if="!item.Url" src="../../../assets/img/bg_c3@3x.png">
                <img v-else :src="item.Url">
                <div class="TFIMGzhe">
                  <div class="TFreupload" @click="updateTFimg(index)">
                    <el-upload
                      :file-list="FeatureData.fileList"
                      :http-request="UploadAttachment"
                      :multiple="true"
                      accept="image/jpeg, image/gif, image/png, image/bmp"
                      :show-file-list="false"
                      action
                    >
                      <i class="iconfont icon-Edit"></i>
                    </el-upload>
                  </div>
                  <div class="TFremove" @click="handleRemove(item)" v-if="item.Url">
                    <i class="iconfont icon-xingzhuang"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="TFLeft" v-if="FeatureData.FeatureType==FeatureTypeState.slideType">
            <span>{{$t('sm.xiaoguoyldzxg')}}</span>
            <div class="TFIMGContent">
              <div class="block">
                <el-carousel trigger="click">
                  <el-carousel-item v-for="item in FeatureData.fileList" :key="item.subCode">
                    <img v-if="!item.Url" src="../../../assets/img/bg_c3@3x.png">
                    <img v-else :src="item.Url">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
          <div v-if="FeatureData.FeatureType==FeatureTypeState.userDefined">
            <span class="userDeSpan">{{$t('sm.xiaoguoyldzxg')}}</span>
            <div class="userDefined">
              <!-- <quill-editor @change="onEditorChange($event)" v-model="FeatureData.FeatureContent">
              </quill-editor>-->
              <my-edit
                v-on:edit-value="FeatureData.FeatureContent = arguments[0]"
                v-bind:editValue="FeatureData.FeatureContent"
                v-bind:toolbarShow="toolbar"
                v-bind:referenceList="DefaultList"
                v-bind:placeholder="placeholder"
              ></my-edit>
            </div>
          </div>
          <div class="TFright" v-if="FeatureData.FeatureType!=FeatureTypeState.userDefined">
            <div
              class="sliderContent clearfix"
              v-if="FeatureData.FeatureType==FeatureTypeState.slideType"
            >
              <div
                class="TFimgList"
                v-for="(item,index) in FeatureData.fileList"
                :key="item.subCode"
              >
                <img v-if="!item.Url" src="../../../assets/img/bg_c3@3x.png">
                <img v-else :src="item.Url">
                <div class="TFIMGzhe">
                  <div class="TFreupload" @click="updateTFimg(index)">
                    <el-upload
                      :file-list="FeatureData.fileList"
                      :http-request="UploadAttachment"
                      :multiple="true"
                      accept="image/jpeg, image/gif, image/png, image/bmp"
                      :show-file-list="false"
                      action
                    >
                      <i class="iconfont icon-Edit"></i>
                    </el-upload>
                  </div>
                  <div class="TFremove" @click="handleRemove(item)" v-if="item.Url">
                    <i class="iconfont icon-xingzhuang"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="FeatureData.FeatureType===FeatureTypeState.travelSpecial">
            <new-feature ref='newFeature' :data='FeatureData'></new-feature>
          </div>
          <div v-if="FeatureData.FeatureType===FeatureTypeState.travelSpecial2">
            <newFeature2 ref='newFeature2' :data='FeatureData'></newFeature2>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Travelslider from "../../../assets/img/Travelslider.png";
import TravelNinegrid from "../../../assets/img/TravelNinegrid.png";
import userDefined from "../../../assets/img/userDefined.png";

import MyEdit from "../../EditTemplate.vue";
import vEditDiv from "./TravelTemp/VEditDiv";
import travelHotel1 from "./TravelTemp/TravelHotel1";
import travelHotel2 from "./TravelTemp/TravelHotel2";
import travelHotel3 from "./TravelTemp/TravelHotel3";
import travelViewSpot1 from "./TravelTemp/TravelViewSpot1";
import travelViewSpot2 from "./TravelTemp/TravelViewSpot2";
import travelRestaurant1 from "./TravelTemp/TravelRestaurant1";
import travelRestaurant2 from "./TravelTemp/TravelRestaurant2";
import newFeature from './travelFeature/index';
import newFeature2 from './TravelTemp/travelFeature2';
import { setTimeout } from 'timers';
export default {
  components: {
    vEditDiv,
    travelHotel1,
    travelHotel2,
    travelHotel3,
    travelViewSpot1,
    travelViewSpot2,
    travelRestaurant1,
    travelRestaurant2,
    "my-edit": MyEdit,
    newFeature,
    newFeature2
  },
  props: ["subConfigId", "FeatureData"],
  data() {
    return {
      updateChoseIndex: "0",

      toolbar: {
        clean: false, //加粗
        font: false, //字体
        narrative: true, //叙述,
        image: true
      },
      ckTitle: "",
      placeholder: this.$t("pub.pleaseImport"),
      DefaultList: [],
      //行程特色类型
      FeatureTypeState: {
        slideType: 1,
        nineGrid: 2,
        userDefined: 3,
        travelSpecial: 4,
        travelSpecial2: 5
      },
      TypeArray: [
        {
          ckTitle: this.$t('ground.zidingyi'),
          isShow: false,
          imgUrl: userDefined,
          TypeState: 3
        },
        {
          ckTitle: this.$t('objFill.v101.huandengp'),
          isShow: false,
          imgUrl: Travelslider,
          TypeState: 1
        },
        {
          ckTitle: this.$t('objFill.v101.jiugongge'),
          isShow: false,
          imgUrl: TravelNinegrid,
          TypeState: 2
        },
        {
          ckTitle: this.$t('salesModule.TripSpecial'),
          isShow: false,
          imgUrl: Travelslider,
          TypeState: 4
        },
        // {
        //   ckTitle: this.$t('salesModule.TripSpecial'),
        //   isShow: false,
        //   imgUrl: Travelslider,
        //   TypeState: 5
        // }
      ], //tab数组
      travelsList: [],
      del_show: true,
      //折叠展开
      isFold: ""
    };
  },
  created: function() {},
  methods: {
    // 初始化行程特色
    init: function() {
      let travelsObj = {
        "3": [],
        "2": [],
        "4": []
      };
      for (let i = 0; i < this.FeatureData.DayList.length; i++) {
        for (let item of this.FeatureData.DayList[i].dayArray) {
          if (travelsObj[item.Type] !== undefined) {
            if (item.childItem.ImaArray.length !== 0) {
              travelsObj[item.Type].push(item.childItem);
            }
          }
        }
      }
      if (this.FeatureData.DayList.length !== 0) {
        for (let obj in travelsObj) {
          for (let k = 0; k < travelsObj[obj].length; k++) {
            if (obj === "3") {
              travelsObj[obj][k]["temp"] = "travelHotel" + ((k % 3) + 1);
            } else if (obj === "2") {
              travelsObj[obj][k]["temp"] = "travelViewSpot" + ((k % 2) + 1);
            } else if (obj === "4") {
              travelsObj[obj][k]["temp"] = "travelRestaurant" + ((k % 2) + 1);
            }
          }
        }
        this.travelsList = [];
        this.travelsList = this.travelsList.concat(travelsObj["3"]);
        this.travelsList = this.travelsList.concat(travelsObj["2"]);
        this.travelsList = this.travelsList.concat(travelsObj["4"]);
      }
    },
    // 行程特色删除区块
    delFeature: function(key) {
      this.travelsList.splice(key, 1);
    },
    // 抓取行程特色节点储存
    uuid(len, radix) {
      var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
        ""
      );
      var uuid = [],
        i;
      radix = radix || chars.length;
      if (len) {
        // Compact form
        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
      } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
        uuid[14] = "4";
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | (Math.random() * 16);
            uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
          }
        }
      }
      return uuid.join("");
    },
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },
    getHtml: function(postData) {
      if(this.$refs.newFeature!=undefined)
      {
        var obj=this.$refs.newFeature.getFeatureData();
        postData.Feature.FeatureHtmlJson= JSON.stringify(obj)
      }
      let that=this
      setTimeout(()=>{
        postData.Feature.FeatureHtml = document.getElementById("newFeatureBox").innerHTML
        that.apipost("travel_post_SetFeature",postData,res => {
            if (res.data.resultCode == 1) {
            }
          },
          err => {}
        )
      },1000)
    },
    //切换tab事件
    clickFeature(item) {
      this.TypeArray.forEach(x => {
        if (x.TypeState == item.TypeState) {
          x.isShow = true;
          this.ckTitle = x.ckTitle;
          this.FeatureData.FeatureType = item.TypeState;
        } else {
          x.isShow = false;
        }
      });
      this.initFileList();
    },
    //点击折叠
    fold() {
      if (this.isFold == "") {
        this.isFold = 1;
      } else {
        this.isFold = "";
      }
    },
    //上传图片
    UploadAttachment(file) {
      let newArr = [];
      newArr.push(file.file);
      let fileName = file.file.name;
      let that = this;
      let path = "/Upload/DMC/";
      this.UploadSelfFileT(path, newArr, x => {
        var str = x.res.requestUrls[0];
        that.FeatureData.fileList[
          this.updateChoseIndex
        ].Url = this.domainManager().ViittoFileUrl + x.data.FilePath;
        that.FeatureData.fileList[this.updateChoseIndex].Name = fileName;
      });
    },
    //删除
    handleRemove(obj) {
      obj.Url = "";
      obj.Name = "";
    },
    //修改图片
    updateTFimg(index) {
      this.updateChoseIndex = index;
    },
    //初始化幻灯片
    initFileList() {
      this.FeatureData.fileList = [];
      switch (this.FeatureData.FeatureType) {
        case this.FeatureTypeState.slideType:
          for (var i = 0; i < 5; i++) {
            var fileObj = this.$commonUtils.FileObject();
            this.FeatureData.fileList.push(fileObj);
          }
          break;
        case this.FeatureTypeState.nineGrid:
          for (var i = 0; i < 9; i++) {
            var fileObj = this.$commonUtils.FileObject();
            this.FeatureData.fileList.push(fileObj);
          }
          break;
      }
    },
    onEditorChange({ editor, html, text }) {
      //富文本编辑器  文本改变时 设置字段值
      this.FeatureData.FeatureContent = html;
    },
    initFeature() {
      this.TypeArray.forEach(x => {
        if (x.TypeState == this.FeatureData.FeatureType) {
          x.isShow = true;
          this.ckTitle = x.ckTitle;
        } else {
          x.isShow = false;
        }
      });
    }
  },
  mounted() {},
  watch: {
    FeatureData: {
      //深度监听，可监听到对象、数组的变化
      handler: function(val, oldVal) {
        this.$emit("featureCallBack", this.FeatureData);
      },
      deep: true
    },
    "FeatureData.fileList": {
      handler: function(val, oldval) {
        this.FeatureData.FeatureImg = JSON.stringify(this.FeatureData.fileList);
        this.$emit("featureCallBack", this.FeatureData);
      },
      deep: true
    },
    FeatureData: {
      handler: function(val, oldval) {
        this.initFeature();
      },
      deep: true
    },
    "FeatureData.DayList": {
      handler: function(val, oldval) {
        this.init();
      },
      deep: true
    }
  }
};
</script>

<style>
@font-face {
  font-family: "FZDBSJW";
  src: url("../../../assets/webfont/FZDBSJW.woff") format("woff"),
    url("../../../assets/webfont/FZDBSJW.ttf") format("truetype"),
    url("../../../assets/webfont/FZDBSJW.svg") format("svg");
}
.travelSpecial {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 30px;
  font-family: FZDBSJW;
}
/* 行程特色头部 */
.special_header {
  position: relative;
  width: 100%;
  height: 130px;
  background-size: 100% 100%;
}
.special_header > img {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.special_header > div {
  position: relative;
  z-index: 2;
  padding: 25px 0 0 0;
  width: 100%;
  height: 100%;
}
.special_header > div > div:nth-child(1) {
  margin: 0 0 0 270px;
  max-width: 400px;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 36px;
  line-height: 36px;
  overflow: hidden;
  font-weight: normal;
  font-size: 36px;
  color: #f5e7cd;
}
.special_header > div > div:nth-child(2) {
  display: inline-block;
  margin: 12px 0 0 270px;
  padding: 5px 10px;
  font-weight: normal;
  font-size: 20px;
  color: #f5e7cd;
  border: 1px solid #f5e7cd;
  white-space: nowrap;
}
.special_header > div > div:nth-child(2) > span {
  vertical-align: middle;
}
.special_header > div > div:nth-child(2) > div {
  display: inline-block;
  max-width: 355px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
.special_header > div > img {
  position: absolute;
  top: 36px;
  right: 5px;
  width: 191px;
  height: 39px;
}
.special_portrait {
  position: absolute;
  z-index: 10;
  top: 0px;
  left: 0px;
}
.special_title {
  position: absolute;
  top: 85px;
  right: 0px;
  width: 136px;
  height: 60px;
}
.special_title > div:nth-child(1) {
  width: 100%;
  height: 45px;
  background-color: #a5851e;
  line-height: 45px;
  text-align: center;
  font-size: 24px;
  color: #ffffff;
}
.special_title > div:nth-child(2) {
  margin: -5px 0 0 0;
  width: 100%;
  height: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 20px;
  color: #a5851e;
}
/* 行程特色底部 */
.special_footer {
  position: relative;
  margin: 10px 0 60px 0;
  width: 100%;
  height: 80px;
}
.special_footer > div:nth-child(1) {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 40px;
}
.special_footer > div:nth-child(1) > img {
  position: absolute;
  z-index: 1;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}
.special_footer > div:nth-child(1) > div {
  position: relative;
  z-index: 2;
  padding: 0 60px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #333333;
  text-indent: 5px;
}
.special_footer > div:nth-child(2) {
  position: absolute;
  z-index: 3;
  top: 0px;
  right: 0px;
  font-size: 0px;
}
.special_footer > div:nth-child(2) > div:nth-child(1) {
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  color: #666666;
  white-space: nowrap;
  background-color: #e6e6e6;
  vertical-align: middle;
}
.special_footer > div:nth-child(2) > div:nth-child(2) {
  display: inline-block;
  width: 80px;
  height: 80px;
  vertical-align: middle;
}
.special_footer > div:nth-child(2) > div:nth-child(2) > img {
  width: 100%;
  height: 100%;
}
/* 行程特色内容 */
.special_content {
  position: relative;
  margin: 40px 0 0 0;
  padding: 0 60px;
  width: 100%;
}
.special_content:hover > .special_del {
  display: block;
}
.special_del {
  display: none;
  position: absolute;
  z-index: 20;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.special_del > span {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 36px;
  border-radius: 50%;
  color: #ffffff;
  background-color: #808080;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -webkit-transform: translate(-50%, -50%); /* Safari 和 Chrome */
  -o-transform: translate(-50%, -50%);
}
.special_del > span:hover {
  color: #e95252;
  background-color: #ffffff;
  cursor: pointer;
}
/* 红色标签左边 */
.travel_title_left_red {
  font-size: 0px;
  color: #ffffff;
}
.travel_title_left_red > div:nth-child(1) {
  display: inline-block;
  padding: 0 15px;
  max-width: 255px;
  height: 48px;
  line-height: 48px;
  font-size: 24px;
  white-space: nowrap;
  background-color: #9c0003;
  vertical-align: top;
  overflow: hidden;
}
.travel_title_left_red > div:nth-child(2) {
  position: relative;
  display: inline-block;
  background-size: 100% 100%;
  width: 0;
  height: 0;
  border-width: 24px 10px 24px 10px;
  border-style: solid;
  border-color: #9c0003 transparent transparent #9c0003;
  vertical-align: top;
}
/* 红色标签右边 */
.travel_title_right_red {
  font-size: 0px;
  color: #ffffff;
}
.travel_title_right_red > div:nth-child(1) {
  position: relative;
  display: inline-block;
  background-size: 100% 100%;
  width: 0;
  height: 0;
  border-width: 24px 10px 24px 10px;
  border-style: solid;
  border-color: #9c0003 #9c0003 transparent transparent;
  vertical-align: top;
}
.travel_title_right_red > div:nth-child(2) {
  display: inline-block;
  padding: 0 15px;
  max-width: 255px;
  height: 48px;
  line-height: 48px;
  font-size: 24px;
  white-space: nowrap;
  background-color: #9c0003;
  vertical-align: top;
  overflow: hidden;
}
/* 黄色标签左边 */
.travel_title_left_yellow {
  font-size: 0px;
  color: #ffffff;
}
.travel_title_left_yellow > div:nth-child(1) {
  display: inline-block;
  padding: 0 10px;
  max-width: 130px;
  height: 36px;
  line-height: 36px;
  font-size: 24px;
  white-space: nowrap;
  background-color: #a5851e;
  vertical-align: top;
  overflow: hidden;
}
.travel_title_left_yellow > div:nth-child(2) {
  position: relative;
  display: inline-block;
  background-size: 100% 100%;
  width: 0;
  height: 0;
  border-width: 18px 7px 18px 7px;
  border-style: solid;
  border-color: #a5851e transparent transparent #a5851e;
  vertical-align: top;
}
/* 黄色标签右边 */
.travel_title_right_yellow {
  font-size: 0px;
  color: #ffffff;
}
.travel_title_right_yellow > div:nth-child(1) {
  position: relative;
  display: inline-block;
  background-size: 100% 100%;
  width: 0;
  height: 0;
  border-width: 18px 7px 18px 7px;
  border-style: solid;
  border-color: #a5851e #a5851e transparent transparent;
  vertical-align: top;
}
.travel_title_right_yellow > div:nth-child(2) {
  display: inline-block;
  padding: 0 10px;
  max-width: 130px;
  height: 36px;
  line-height: 36px;
  font-size: 24px;
  white-space: nowrap;
  background-color: #a5851e;
  vertical-align: top;
  overflow: hidden;
}

.travelTab_right {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 88px;
  height: 88px;
}
.travelTab_right > img {
  width: 100%;
  height: 100%;
}
.travelTab_right > span {
  position: absolute;
  top: 12px;
  right: 4px;
  font-family: MicrosoftYaHei;
  font-size: 24px;
  color: #ffffff;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg); /* IE 9 */
  -moz-transform: rotate(45deg); /* Firefox */
  -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
  -o-transform: rotate(45deg);
}
.travelTab_left {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 88px;
  height: 88px;
}
.travelTab_left > img {
  width: 100%;
  height: 100%;
}
.travelTab_left > span {
  position: absolute;
  top: 12px;
  left: 4px;
  font-family: MicrosoftYaHei;
  font-size: 24px;
  color: #ffffff;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg); /* IE 9 */
  -moz-transform: rotate(-45deg); /* Firefox */
  -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
  -o-transform: rotate(-45deg);
}
/* 酒店 */
.travelHotel1 {
  position: relative;
  padding: 10px;
  width: 100%;
  font-size: 0px;
  border: 1px solid #b7aa7f;
}
.travelHotel1_top {
  width: 100%;
  max-height: 430px;
  overflow: hidden;
}
.travelHotel1_top > img {
  width: 100%;
}
.travelHotel1_travelTab {
  top: 10px;
  right: 10px;
}
.travelHotel1_bottom {
  display: table;
  margin: 20px 0 0 0;
  width: 100%;
  white-space: nowrap;
}
.travelHotel1_bottom > div:nth-child(1) {
  display: table-cell;
}
.travelHotel1_title_red {
  position: relative;
  margin: 0 0 0 -25px;
  padding: 0 0 0 0;
  white-space: nowrap;
}
.travelHotel1_title_yellow {
  margin: 5px 0 0 -25px;
  padding: 0 0 0 0;
  white-space: nowrap;
}
.travelHotel1_label {
  position: absolute;
  left: -40px;
  top: -110px;
  width: 126px;
  height: 126px;
}
.travelHotel1_label > img {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.travelHotel1_label > div {
  position: relative;
  z-index: 2;
  padding: 25px 40px 0 30px;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: #000000;
  white-space: normal;
}
.travelHotel1_stone {
  position: absolute;
  left: 30px;
  top: 5px;
}
.travelHotel1_explain {
  padding: 0 0 0 70px;
  white-space: normal;
  max-height: 96px;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  color: #333333;
}

.travelHotel2 {
  margin: 0 0 0 5%;
  width: 100%;
  height: 100%;
  font-size: 0px;
  border: 1px solid #b7aa7f;
  background-color: #fffbf0;
}
.travelHotel2_left {
  position: relative;
  display: inline-block;
  width: 35%;
  height: 100%;
  vertical-align: top;
}
.travelHotel2_title_red {
  position: absolute;
  z-index: 3;
  top: 50px;
  left: 80%;
  white-space: nowrap;
}
.travelHotel2_title_yellow {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 95%;
  white-space: nowrap;
}
.travelHotel2_label {
  position: absolute;
  left: -40px;
  top: -115px;
  width: 126px;
  height: 126px;
}
.travelHotel2_label > img {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.travelHotel2_label > div {
  position: relative;
  z-index: 2;
  padding: 25px 40px 0 30px;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: #000000;
  white-space: normal;
}
.travelHotel2_space {
  position: relative;
  z-index: 1;
  margin: -1px 0 0 -1px;
  width: 100.3%;
  height: 31px;
  border-bottom: 1px solid #b7aa7f;
  background-color: #ffffff;
}
.travelHotel2_bottom {
  margin: 70px 0 0 0;
  padding: 20px;
  width: 100%;
  max-height: 175px;
  line-height: 32px;
  overflow: hidden;
  font-size: 16px;
  color: #333333;
}
.travelHotel2_stone {
  position: absolute;
  top: 140px;
  left: -50px;
}
.travelHotel2_right {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 65%;
  max-height: 280px;
  overflow: hidden;
  border-left: 1px solid #b7aa7f;
  vertical-align: top;
  text-align: center;
}
.travelHotel2_right > img {
  width: 100%;
}

.travelHotel3 {
  width: 100%;
  font-size: 0px;
}
.travelHotel3_left {
  position: relative;
  display: inline-block;
  width: 70%;
  max-height: 315px;
  overflow: hidden;
  border: 1px solid #b7aa7f;
  vertical-align: top;
}
.travelHotel3_left > img {
  width: 100%;
}
.travelHotel3_right {
  position: relative;
  display: inline-block;
  width: 30%;
  vertical-align: top;
}
.travelHotel3_title_red {
  position: absolute;
  top: 45px;
  right: 0px;
  white-space: nowrap;
}
.travelHotel3_title_yellow {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 95%;
  white-space: nowrap;
}
.travelHotel3_label {
  position: absolute;
  z-index: 3;
  left: -40px;
  top: -115px;
  width: 126px;
  height: 126px;
}
.travelHotel3_label > img {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.travelHotel3_label > div {
  position: relative;
  z-index: 2;
  padding: 25px 40px 0 30px;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: #000000;
  white-space: normal;
}
.travelHotel3_stone {
  position: absolute;
  left: -50px;
  top: -40px;
}
.travelHotel3_bottom {
  margin: 120px 0 0 20px;
  width: 100%;
  max-height: 160px;
  line-height: 32px;
  overflow: hidden;
  font-size: 16px;
  color: #333333;
}

/* 景点 */
.travelViewSpot1 {
  width: 100%;
  font-size: 0px;
}
.travelViewSpot1_left {
  position: relative;
  display: inline-block;
  width: 70%;
  max-height: 315px;
  overflow: hidden;
  border: 1px solid #b7aa7f;
  vertical-align: top;
}
.travelViewSpot1_left > img {
  width: 100%;
}
.travelViewSpot1_right {
  position: relative;
  display: inline-block;
  width: 30%;
  vertical-align: top;
}
.travelViewSpot1_title_red {
  position: absolute;
  top: 90px;
  left: -15px;
  white-space: nowrap;
}
.travelViewSpot1_title_yellow {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 95%;
  white-space: nowrap;
}
.travelViewSpot1_label {
  position: absolute;
  left: -40px;
  top: -115px;
  width: 126px;
  height: 126px;
}
.travelViewSpot1_label > img {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.travelViewSpot1_label > div {
  position: relative;
  z-index: 2;
  padding: 25px 40px 0 30px;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: #000000;
  white-space: normal;
}
.travelViewSpot1_stone {
  position: absolute;
  left: 110px;
  top: -60px;
}
.travelViewSpot1_bottom {
  margin: 150px 0 0 20px;
  width: 100%;
  max-height: 160px;
  line-height: 32px;
  overflow: hidden;
  font-size: 16px;
  color: #333333;
}

.travelViewSpot2 {
  width: 100%;
  font-size: 0px;
}
.travelViewSpot2_left {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 30%;
  vertical-align: top;
}
.travelViewSpot2_title_red {
  position: absolute;
  top: 90px;
  left: 120px;
  white-space: nowrap;
}
.travelViewSpot2_title_yellow {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 95%;
  white-space: nowrap;
}
.travelViewSpot2_label {
  position: absolute;
  left: -40px;
  top: -115px;
  width: 126px;
  height: 126px;
}
.travelViewSpot2_label > img {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.travelViewSpot2_label > div {
  position: relative;
  z-index: 2;
  padding: 25px 40px 0 30px;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: #000000;
  white-space: normal;
}
.travelViewSpot2_stone {
  position: absolute;
  left: 100px;
  top: -60px;
}
.travelViewSpot2_bottom {
  margin: 150px 0 0 0;
  padding: 0 20px 0 0;
  width: 100%;
  max-height: 160px;
  line-height: 32px;
  overflow: hidden;
  font-size: 16px;
  color: #333333;
}
.travelViewSpot2_right {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 70%;
  max-height: 315px;
  overflow: hidden;
  border: 1px solid #b7aa7f;
  vertical-align: top;
}
.travelViewSpot2_right > img {
  width: 100%;
}

/* 餐饮 */
.travelRestaurant1 {
  width: 100%;
}
.travelRestaurant1_top {
  position: relative;
  padding: 10px;
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  border: 1px solid #b7aa7f;
}
.travelRestaurant1_top > img {
  width: 100%;
}
.travelRestaurant1_travelTab {
  top: 10px;
  right: 10px;
}
.travelRestaurant1_content {
  position: relative;
}
.travelRestaurant1_title_red {
  position: absolute;
  left: 120px;
  top: -60px;
}
.travelRestaurant1_title_yellow {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 95%;
  white-space: nowrap;
}
.travelRestaurant1_label {
  position: absolute;
  left: -40px;
  top: -115px;
  width: 126px;
  height: 126px;
}
.travelRestaurant1_label > img {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.travelRestaurant1_label > div {
  position: relative;
  z-index: 2;
  padding: 25px 40px 0 30px;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: #000000;
  white-space: normal;
}
.travelRestaurant1_stone {
  position: absolute;
  left: 70px;
  top: 0px;
}
.travelRestaurant1_bottom {
  margin: 70px 0 0 0;
  width: 100%;
  max-height: 96px;
  line-height: 32px;
  overflow: hidden;
  font-size: 16px;
  color: #333333;
}

.travelRestaurant2 {
  width: 100%;
  font-size: 0px;
}
.travelRestaurant2_left {
  position: relative;
  display: inline-block;
  width: 70%;
  max-height: 420px;
  overflow: hidden;
  border: 1px solid #b7aa7f;
  vertical-align: top;
}
.travelRestaurant2_left > img {
  width: 100%;
}
.travelRestaurant2_right {
  position: relative;
  display: inline-block;
  width: 30%;
  vertical-align: top;
}
.travelRestaurant2_title_red {
  position: absolute;
  top: 100px;
  right: 50px;
  white-space: nowrap;
}
.travelRestaurant2_title_yellow {
  position: absolute;
  z-index: 3;
  top: -40px;
  right: 110px;
  white-space: nowrap;
}
.travelRestaurant2_label {
  position: absolute;
  right: -75px;
  top: -95px;
  width: 126px;
  height: 126px;
}
.travelRestaurant2_label > img {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.travelRestaurant2_label > div {
  position: relative;
  z-index: 2;
  padding: 25px 30px 0 40px;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: #000000;
  white-space: normal;
}
.travelRestaurant2_stone {
  position: absolute;
  right: 80px;
  top: -60px;
}
.travelRestaurant2_bottom {
  margin: 160px 0 0 20px;
  width: 100%;
  max-height: 256px;
  line-height: 32px;
  overflow: hidden;
  font-size: 16px;
  color: #333333;
}
</style>
