<template>
  <div class="Goods">
    <!-- 图片盒子 -->
    <div class="title">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item
          @click="lookImg(require(`@/assets/img/goods/sw1/${i}.png`))"
          v-for="i in 3"
          :key="i"
        >
          <img
            class="bacImg"
            v-lazy="require(`@/assets/img/goods/sw1/${i}.png`)"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
      <div class="title_rr">
        <div>
          <img src="../../assets/img/goods/inco1.png" alt="" />
          <p>130</p>
        </div>
        <div>
          <img src="../../assets/img/goods/inco2.png" alt="" />
          <p>130</p>
        </div>
        <div @click="$router.push('/goods/share')">
          <img src="../../assets/img/goods/inco3.png" alt="" />
          <p>130</p>
        </div>
      </div>
      <div class="title_txt" v-show="0">
        <h4>中江塔·Zhongjiang Tower</h4>
        <p>芜湖“江上芙蓉”</p>
      </div>
    </div>
    <!-- 介绍盒子1 -->
    <div class="txtBox">
      <div class="txtName">老芜湖海关</div>
      <p>
        &emsp;&emsp;海关关廨大楼，芜湖人称为“老芜湖海关”，2004年，被安徽省政府公布为第五批省级文物保护单位，2019年10月被国务院公布为全国重点文物保护单位。如今，沿着十里江湾人民公园的沿江步道，可看见老海关大楼矗立在江边。
      </p>
    </div>
    <!-- 中间的8个模块 -->
    <div class="skipBtnBox">
      <div
        class="skipRow"
        v-for="item in skipData"
        :key="item.id"
        @click="toPage(item.path)"
      >
        <img :src="require(`@/assets/img/goods/skip${item.id}.png`)" alt="" />
        <p>{{ item.name }}</p>
      </div>
    </div>

    <!-- 介绍盒子2 -->
    <div class="txtBox">
      <div class="txt2Row">
        <div class="txt2RowLL">保护级别</div>
        <div class="txt2RowRR">不可移动革命文物，优秀历史建筑</div>
      </div>
      <div class="txt2Row">
        <div class="txt2RowLL">建筑地址</div>
        <div class="txt2RowRR">滨江北路芜湖滨江公园内</div>
      </div>
      <div class="txt2Row">
        <div class="txt2RowLL">开放时间</div>
        <div class="txt2RowRR">周一至周五09：00-21：00</div>
      </div>
      <div class="txt2Row">
        <div class="txt2RowLL">门票信息</div>
        <div class="txt2RowRR">免费</div>
      </div>
    </div>

    <!-- 视频介绍 -->
    <div class="txtNameMain">视频介绍</div>
    <div class="videoBox">
      <div class="videoShade" v-show="!videoPlay" @click="videoPlayFu"></div>
      <video src="../../assets/media/loop.mp4" controls></video>
    </div>

    <!-- 景点介绍 -->
    <div class="txtNameMain">景点介绍</div>
    <!-- <div class="IntroduceBox">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item
          @click="lookImg(require(`@/assets/img/goods/title.png`))"
          v-for="i in 3"
          :key="i"
        >
          <img
            class="bacImg"
            v-lazy="require(`@/assets/img/goods/title.png`)"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div> -->

    <div class="IntroduceTxt">
      <h1>01</h1>
      <h2>建筑有话说</h2>
      <h3>欧式新古典主义的典范</h3>
      <p>
        &emsp;&emsp;老芜湖海关大楼始建于1916年，历时三年，于1919年7月14日正式建成并投入使用，耗资19.4万两关平银。关平银是清末民国初期，海关征收进出口税时通用的货币单位，每100两关平银，可折合当时在全国各地通行的银两约为105两至110两左右。<br />
        &emsp;&emsp;大楼坐东朝西，面向长江，由两层主楼与五层塔楼组合而成，整体为砖木混凝土混合结构，红砖净缝砌筑，占地面积约497平方米，面阔约21.94米，进深约18.86米。主楼东、西、南三面设置外廊，以砖砌廊柱承重。
      </p>
      <p>
        &emsp;&emsp;外廊式建筑是我国近代早期西洋建筑主要的建筑样式。对于芜湖而言，外廊式建筑是西洋建筑文化在芜湖传播的第一批产物，可以说是芜湖近代西洋建筑发展的起点。老芜湖海关大楼就是第一批建筑的典型代表之一。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/1.png" alt="" />
      </div>
      <p>
        &emsp;&emsp;
        “老海关大楼整体建筑风格是源于欧洲古典建筑的近代新古典式。”葛立三介绍，从建筑的四个立面和檐部、腰线、廊柱、塔楼等处的构件看，老海关的设计风格是在沿用欧洲古典建筑的基础上进行简化，除去了繁琐而过分华丽的装饰元素，更加注重线条的装饰效果和建筑的实用功能。<br />
        &emsp;&emsp;从高空俯视，整幢建筑呈正方形，屋顶采用四坡顶形式，呈“口”字形，原先为红色瓦楞铁皮铺设，现替换为红色钢瓦。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/2.png" alt="" />
        <p>▲高空俯瞰</p>
      </div>
      <p>
        &emsp;&emsp;如果环绕大楼一圈，各个立面均有其独特的艺术效果。其中，西立面是大楼的主要立面，也是最具艺术表现力的立面。远观西立面，整体呈“凸”字形，以塔楼为中轴线对称分布，塔楼与主楼高低对比产生了丰富的建筑轮廓线，同时，主楼廊柱的“虚”与塔楼墙体的“实”相互衬托，使建筑显得十分庄重。“南北两个侧立面为非对称式，塔楼在一侧，高低错落，又让整幢楼显得富有动感。”葛立三说。主楼各个立面大面积设置百叶门窗，宽度对应廊柱间距，门窗面积占墙面积在55%至80%之间，除了增强墙面的形式感，从实用性角度，更有利于建筑物室内通风和采光。
      </p>

      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/3.png" alt="" />
        <p>▲老海关大楼西立面</p>
      </div>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/4.png" alt="" />
        <p>▲老海关大楼廊柱</p>
      </div>
      <p>
        &emsp;&emsp;走近主楼外廊，细看廊柱的设计充分彰显了设计者的匠心。“大楼廊柱分为单柱和角柱，檐下采用整块条石过梁，将廊柱串联在一起。柱头采用石块雕刻线条，虽比古典欧式中的多立克柱式简化许多，但装饰性丝毫没有减弱。”葛立三说，值得一提的是，中间柱采用单柱形式，边角用红砖砌筑起凸边，做出竖向凹槽，使廊柱呈现竖线条的立体感；角柱采用单柱与附壁柱混合砌筑，立面垂直砌筑五皮砖为基准面，一皮砖凹槽间隔，使角柱富有较强的雕塑感，同时视觉上突出均衡、稳定的艺术效果。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/5.png" alt="" />
        <p>▲主楼外廊柱</p>
      </div>
      <p>
        &emsp;&emsp;与主楼相比，塔楼的装饰构件，则有更多令人瞩目的细节设计。塔楼正面二层高度设有一扇圆形舷窗，舷窗四周大理石装饰，上方拼接成拱券，下方石材浮雕绶带式样，造型精美。塔楼下面三层外形是正方形，四角为砖柱，柱顶有尖塔形石雕。四层以上钟楼部分，外形为八角形。四层高度处，西、南、北三面各有一座圆钟。每一座圆钟两侧各外挑一根矮柱，两根矮柱之间向上发起拱券，拱檐下有齿，拱脚下也有装饰。第五层为瞭望台，四面墙体大面积虚化，以铁质栏杆围挡。“根据考证，塔顶原为八棱锥的尖顶，可能是在战争中损坏，后期修复时改成了平顶。”葛立三说。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/6.png" alt="" />
      </div>

      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/7.png" alt="" />
        <p>▲塔楼外貌</p>
      </div>
      <p>
        &emsp;&emsp;整幢大楼分为东西两个入口，西入口为主入口。从西入口步入大楼内部，穿过塔楼即可进入南北两个大厅。一层为水磨石地面，最初被作为营业厅使用，现已改造成展览馆，内部空间设置稍作调整，但整体框架仍保留原貌；二层为木质地板，原为办公用房，现在空置。顺着塔楼的旋转楼梯登上主楼三层，可进入阁楼间。阁楼同样为木质地面，空间与一二层面积相当，但内部没做装饰处理，都是支撑四坡屋顶的木制梁柱，不难看出各个坡面的整体构造。继续顺着楼梯登上塔楼顶层，便进入瞭望台，从这里既可以远眺长江，也可以俯瞰滨江全貌。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/8.png" alt="" />
        <p>▲大楼内部</p>
      </div>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/9.png" alt="" />
        <p>▲远眺长江</p>
      </div>
      <p>
        &emsp;&emsp;“上个世纪八十年代，我曾在武汉有关单位查阅到一张‘芜湖旧海关房产地盘图’，了解了海关大楼及其附属建筑群的原貌。”从葛立三展示的图纸上可以看到，如今的老海关大楼只占当年整个海关地产的零星一角，除此以外，还曾有巡江勤务房、未婚关员宿舍、已婚检货员宿舍、码头房、水手卧房、堆栈、足球场等处，占地面积约50亩。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/10.png" alt="" />
      </div>
      <p>
        &emsp;&emsp;历经百年，几经变更，老芜湖海关的其他用房早已不复存在，但历史的过往，一点一滴浓缩在如今这幢老海关大楼的一砖一瓦中，像一本厚重的历史书，等待人们去翻阅，去解读。
      </p>
      <h1>02</h1>
      <h2>漫步历史</h2>
      <h3>芜湖从这里走向开放</h3>

      <p>
        &emsp;&emsp;建筑的魅力便在于它是一个客观印刻时代特征的载体。西方国家用坚船利炮轰开了芜湖这座城市的大门，从那时起，伴随着西洋文化的浸入，西洋建筑便开始了其与城市发展的漫长融合。其中，老芜湖海关大楼，在历次战火的洗礼中，在时代的更迭中，顽强地保存了下来，它的背后，是芜湖近代开放发展的脉络。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/11.png" alt="" />
        <p>▲老芜湖海关旧址</p>
      </div>
      <p>
        &emsp;&emsp;1876年9月13日签订的《烟台条约》，辟芜湖为通商口岸，打开了芜湖乃至安徽开放的大门。“芜湖开埠，一方面使西方资本主义势力侵入安徽，另一方面也使口岸城市获得一种新的发展优势，促进了口岸城市发展及城乡关系构建。”安徽师范大学历史学院教授、博士生导师沈世培说。<br />&emsp;&emsp;选择芜湖作为通商口岸，一方面暴露了西方国家意图控制长江流域各城市经济的野心，一方面也说明芜湖在当时已成为长江流域中极具经济地位的城市之一。
      </p>
      <p>
        &emsp;&emsp;“青弋江、漳河将芜湖与皖南腹地紧密相连，裕溪河可直通中原各地，长江又将芜湖与上下游重要城市相连，正因为芜湖特殊的地理位置，从南宋时期开始，这里便成为舟楫便利、商贾云集的城市，明清时期，封建政府相继在芜湖设立工关、户关等关税机构。”沈世培介绍。
      </p>
      <p>
        &emsp;&emsp;1877年2月，芜湖海关设立，定位三等海关，专门征收轮船装运进出口货物的税款，兼管港口、航政，代办邮政、气象等业务，负责稽查鸦片走私。同年4月1日，芜湖关正式开关。最初，海关办公地点位于中江塔附近的一处民房内。
      </p>
      <p>
        &emsp;&emsp;芜湖关开关后，其管辖区域从长江下游至南京，上游至安庆，关税包括进口税、出口税、子口税、鸦片税、船钞以及常关税等项，直接由芜湖海关洋税务司管理。“那一时期，进口货物主要是洋布、洋油、洋烟、洋钉、纽扣、火柴、玻璃、阳伞和染料等，出口的多为上下游地区的土货，如稻米、茶叶、生丝、豆类、棉花、蛋类等。”沈世培介绍。
      </p>
      <p>
        &emsp;&emsp;1882年，直隶总督李鸿章奏请将镇江米市迁至芜湖，芜湖米市形成，大米出口量迅速上升，大米相关产业蓬勃发展，成为与无锡、九江、长沙并肩的中国近代四大米市之一。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/12.png" alt="" />
        <p>▲老芜湖海关外貌</p>
      </div>
      <p>
        &emsp;&emsp;根据沈世培校注的《〈芜湖关华洋贸易情形论略〉校注》一书中可以看出，从1878年至1914年，芜湖海关贸易总量保持激增的势头。例如，从1877年的89.3万两关平银增加到1894年的340多万两关平银，增长了3倍多。对外出口的土货总值也由1877年的36万两关平银增加到1894年的515万两关平银，约增长了9.5倍。“贸易量的增加，让外国商人看到有利可图，一时间，大批外国洋行、公司进入芜湖，大批洋货由芜湖进口，再运往安徽各地。”沈世培说，1918年，芜湖海关进出口货物值达全国对外贸易的3.5%，成为名副其实的长江通商巨埠之一。<br />&emsp;&emsp;就在外商加快掠夺的同时，民族资产阶级也在芜湖悄然萌芽，客观上开启了安徽近代工业的发展之路。1890年，芜湖益新面粉公司创建，这是国内历史最悠久的机制面粉厂之一；1909年，芜湖王福记铁工厂成立，标志着芜湖近代机器工业的肇始；1906年，芜湖明远电灯有限公司成立，总装机容量居于安徽之冠；1916年，裕中纱厂开办，成为国内最早的机械纺纱厂之一……<br />&emsp;&emsp;随着海关贸易越加繁荣，原先租住民房作为海关办公地点已然不妥，海关大楼的建设已提上日程。据《民国元年（1912年）芜湖关贸易情形论略》记载，时任芜湖关税务司的亚纳柏司脱呈报，当年芜湖关已着手修建大楼，但考虑到沿江地带防洪需求，海关大楼在建造前，计划用两年时间填筑修岸。“为欲促进本埠之发达起见，今年七月中，已商定将沿新租界一带地方，让与海关，交付证书，于十一月送到。此处有江岸约五百七十四英尺，岸前水深约七百英尺之谱，但此处仍须充分填高，俾极大洪水亦不致淹没。填筑修岸之工作，即将着手，但须两年后，始能建筑房屋……”
      </p>

      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/13.png" alt="" />
        <p>▲海关大楼图纸</p>
      </div>

      <p>
        &emsp;&emsp;1937年，芜湖沦陷后，海关大楼被日本侵略者占用。1946年7月，芜湖海关被当时的国民政府裁撤，芜湖进出口贸易由南京海关兼管，海关大楼成为当时的安徽省货物税局办公楼。新中国成立后，老芜湖海关大楼被长江芜湖航道处接收使用，其间曾被作为员工宿舍，一直使用至2004年。其后，这幢老建筑的产权又经历了几次变更，现在归属镜湖区政府。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/14.png" alt="" />
        <p>▲老芜湖海关旧址</p>
      </div>

      <p>
        &emsp;&emsp;从1877年至1946年，在芜湖海关长达69年的开关历程中，潘赞化无疑是芜湖人最为熟悉的历史人物，他与潘玉良的爱情故事也流传至今。在《民国元年（1912年）芜湖关贸易情形论略》中，有这样一段话：“此由卓有远见之本省首任都督柏文蔚及其极有力之辅助者海关监督李振标、潘赞化与高尚之团体，共同处理，凡有关于安徽大商埠之发达者，莫不促成之。”可见，1912年，潘赞化出任芜湖海关监督一职时，严于律己、严厉打击走私，对芜湖海关发展起到了一定的积极作用。
      </p>
      <p>
        &emsp;&emsp;当时，中国财政落入北洋军阀手中，贪污腐败风气盛行。潘赞化为老同盟会会员，为人正直，为官清正，他不愿将关税解缴给北洋军阀，便汇寄给上海同盟会。1912年10月，孙中山巡视芜湖时，特与潘赞化会面，赞其义举。这一年，潘赞化在芜湖邂逅张玉良（后改名潘玉良）。1913年，反对袁世凯的“二次革命”失败后，柏文蔚被解职，潘赞化也被免去职务。此后，潘赞化带着潘玉良寓居上海渔阳里，两人在陈独秀的见证下，结为伉俪。今天的老海关大楼旁，仍矗立着潘赞化与潘玉良雕像，以纪念和传扬他们美好的爱情故事。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/15.png" alt="" />
        <p>▲潘赞化与潘玉良的雕像</p>
      </div>
      <p>
        &emsp;&emsp;历史的车轮滚滚向前，芜湖海关翻开了新的一页，芜湖对外开放的进程也站在了新的历史起点。今年，恰逢中国（安徽）自由贸易试验区芜湖片区成立一周年，一年来，自贸试验区芜湖片区大胆试、大胆闯、自主改，吹动了芜湖创新创业的一池春水，显露了芜湖扩大开放的坚定胸怀。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/16.png" alt="" />
        <p>
          金秋的阳光温馨恬静，老芜湖海关塔楼上那一片鲜艳的五星红旗在和煦的秋风中迎风招展。
        </p>
      </div>
      <h1>03</h1>
      <h2>生活记忆</h2>
      <h3>老海关与它的小伙伴</h3>
      <p>
        &emsp;&emsp;说起这座已有百年历史的老建筑，出生于此的市民李建国有着别样的心绪。
      </p>
      <p>&emsp;&emsp;让我们将时间倒回72年前的那个“天翻地覆慨而慷”岁月。</p>
      <p>
        &emsp;&emsp;李建国的父母都是山东日照人，解放战争时期，父亲李贵叶在战场上冲锋陷阵，母亲则挑着扁担一路“支前”，他们跟着解放大军的步伐，从山东老家，一路南下，武汉、上海、南京都曾留下他们的足迹。1949年以后，李贵叶复员到地方，担任了东方红2号轮船的政委。1952年，李贵叶被分配到刚刚组建的长江航务局南京分局芜湖航标段工作。当时航标段的办公地点就设在老芜湖海关大楼的二楼，这里同时也成为李贵叶家。1954年，李贵叶的大儿子李建国在大楼里出生。1957年，李建国的弟弟也出生在这座楼里。
      </p>
      <p>
        &emsp;&emsp;李建国至今对老芜湖海关大楼半个多世纪前的样子还是记忆犹新。他回忆道，当时他的家就在大楼二楼靠东南面的第一间大房间里。父亲的办公室则设在对面的房间，在这间办公室里，只要推开落地百叶窗，万里长江就在眼前。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/17.png" alt="" />
        <p>▲百叶窗外的长江</p>
      </div>

      <p>
        &emsp;&emsp;李建国说，当时住在这座大楼里的除了他们一家，还有蒯家、大小方家、张家、汪家及李家，一共7户人家，都是航道段的家属。在李建国的心里，这座大楼与电影《七十二家房客》里的情形很相似。当时，这座楼里有许多与他年龄相仿的小孩，大楼成了孩子们嬉戏的天堂。说到这里，李建国又提及一件往事，在大楼的背面，曾经有一个很大的花园，四周有花岗岩砌的围墙台基，上面密布做工精美的铸铁栏杆，花园内遍植果树。老海关大楼内的孩子经常在这个花园里玩耍，李建国笑着告诉记者，当年他记不清翻过多少次围墙，对园内外的环境了如指掌。<br />&emsp;&emsp;经过半个世纪的时光，老芜湖海关大楼的许多地方跟原先已经有不少改变了。李建国说，在上世纪六十年代初，大楼正门右侧的砖墙上曾经嵌有一块方形铜牌，上面用中英文记载着这座大楼的建造时间和施工单位等信息。李建国告诉记者，当年他和几个小伙伴一直想把这块铜牌撬下来换糖吃，撬了好几次都没成功，只在铜牌的下口处留有一个小豁口。这块铜牌如今已不知去向。
      </p>
      <p>
        &emsp;&emsp;李建国接受采访时，数次提及楼顶两处大钟后面的圆形花岗岩窗台。他说那里真是夏日乘凉休息的好地方。当时大钟就已经不存在了，但做为钟盘的五彩玻璃依然保存完好。李建国说，这种五彩玻璃非常漂亮，据说是从国外进口的，可惜在上世纪六十年代中期被毁。每每玩累了，李建国就喜欢躺在窗台上睡觉，他说平时这里极少有人来，睡在窗台上，五彩玻璃遮住了绝大部分的日照，同时又江风阵阵，既安静又凉爽，常常一睡就是好几个小时。
      </p>
      <div class="imgBox">
        <img src="../../assets/img/goods/sw1/18.png" alt="" />
        <p>▲海关大楼内饰</p>
      </div>

      <p>
        &emsp;&emsp;小时候，李建国还喜欢顺着木质楼梯攀上大楼最高处，那儿四面围着半人高的铸铁围栏，视野极好。时隔这么多年，李建国还清楚地记得，在楼顶上有个贮水箱，水泥砌就的箱壁上还写有“芜湖巡江司”字样，应该是当年国民政府时期遗留下来的。
      </p>
      <p>
        &emsp;&emsp;1960年，李建国父亲去世3年后，母亲看到航标段的用房很紧张，便主动向组织申请，搬到老芜湖海关大楼一楼的一间小一点房间里。在这里，李建国一家又生活了10年。1970年母亲去世后，李建国调到南京工作，才离开了这座已然生活了16年的老芜湖海关大楼。
      </p>
    </div>

    <div class="noTxt">没有更多了......</div>
  </div>
</template>

<script>
import { Toast } from "vant";

import { ImagePreview } from "vant";
export default {
  name: "Goods",
  components: {},
  data() {
    return {
      skipData: [
        { id: 1, name: "语音导览", path: "/goods/audio" },
        { id: 2, name: "VR场景", path: "/goods/kankan" },
        { id: 3, name: "鸟瞰全景", path: "/goods/vr" },
        { id: 4, name: "文献资料", path: "" },
        // { id: 4, name: '景点导航', path: '/goods/map' },
        // { id: 5, name: '美食', path: '' },
        // { id: 6, name: '酒店住宿', path: '' },
        // { id: 7, name: '预约', path: '' },
        // { id: 8, name: '游玩指引', path: '/goods/play' },
      ],
      videoPlay: false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    toPage(path) {
      if (!path) return Toast("敬请期待!");
      this.$router.push(item.path);
    },

    videoPlayFu() {
      this.videoPlay = true;
      let dom = document.querySelector("video");
      dom.play();
    },
    lookImg(url) {
      ImagePreview({
        images: [url],
        showIndex: false,
      });
    },
  },
  created() {
    window.document.title = "中江塔";
  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Goods {
  padding: 10px 15px 30px;
  width: 100%;
  height: calc(100% - 80px);
  overflow-y: auto;

  .txtNameMain {
    margin-top: 30px;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
    padding-left: 38px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 0px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #ecb1b8;
    }
  }

  .my-swipe {
    width: 100%;
    height: 100%;
  }

  .my-swipe .van-swipe-item {
    border-radius: 8px;
  }

  .bacImg {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  /deep/.van-swipe__indicators {
    bottom: 5px;
  }

  /deep/.van-swipe__indicator {
    opacity: 0.6;
  }

  /deep/.van-swipe__indicator--active {
    opacity: 1;
  }

  .title {
    width: 100%;
    height: 200px;
    position: relative;
  }

  .title_rr {
    position: absolute;
    top: 20px;
    right: 0;
    width: 50px;

    & > div {
      color: #fff;
      text-align: center;
      margin-bottom: 14px;

      & > img {
        width: 20px;
      }

      & > p {
        font-size: 14px;
      }
    }
  }

  .title_txt {
    position: absolute;
    bottom: 10px;
    left: 15px;
    color: #fff;

    & > h4 {
      font-size: 16px;
    }

    & > p {
      margin-top: 5px;
      font-size: 14px;
    }
  }

  .txtBox {
    margin: 10px 0 15px;
    width: 100%;
    min-height: 160px;
    max-height: 200px;
    overflow-y: auto;
    background-image: url("../../assets/img/goods/txtBac.png");
    background-size: 100% 100%;
    padding: 20px 8px 10px;

    .txtName {
      font-size: 16px;
      font-weight: 700;
      height: 20px;
      line-height: 20px;
      padding-left: 30px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ecb1b8;
      }
    }

    & > P {
      padding: 0 15px;
      color: #252525;
      font-size: 14px;
      line-height: 22px;
      margin-top: 15px;
    }
  }

  .skipBtnBox {
    margin: 20px 0 0;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;

    .skipRow {
      width: 25%;
      text-align: center;
      margin-bottom: 24px;

      & > img {
        width: 40px;
      }

      & > p {
        color: #535353;
        font-size: 14px;
      }
    }
  }

  .txtBox {
    .txt2Row {
      padding: 0 15px;
      display: flex;
      margin-bottom: 8px;

      .txt2RowLL {
        width: 80px;
        font-size: 14px;
        font-weight: 700;
        color: #535353;
      }

      .txt2RowRR {
        font-size: 14px;
        color: #2d2d2d;
        width: calc(100% - 80px);
      }
    }
  }

  .videoBox {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    height: 180px;

    .videoShade {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background: url("../../assets/img/goods/videoPlay.png") center no-repeat;
      // background-color: rgba(33,81,144,.8);
      background-size: 50px 50px;
    }

    video {
      width: 100%;
      height: 100%;
    }
  }

  .IntroduceBox {
    width: 100%;
    height: 200px;
  }

  .IntroduceTxt {
    margin: 24px 0 15px;
    padding: 0 5px;
    font-size: 14px;
    color: #535353;
    line-height: 24px;
    & > h1 {
      margin: 10px 0;
    }
    & > h2 {
      margin: 5px 0;
    }
    & > h3 {
      margin-bottom: 10px;
    }
    .imgBox {
      width: 100%;
      margin-bottom: 20px;
      & > img {
        width: 100%;
      }
    }
    & > p {
      margin-bottom: 20px;
    }
  }

  .noTxt {
    text-align: center;
    font-size: 14px;
    color: #c3c3c3;
  }
}
</style>