TouTiao.vue 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381
  1. <template>
  2. <view class="bg">
  3. <!-- 轮播 -->
  4. <view class="swipercontent ">
  5. <view class='swiper-img'>
  6. <image :src="typeconfig.banner" class="slide-image" mode="widthFix" />
  7. </view>
  8. </view>
  9. <!--内容区域 -->
  10. <view class="content">
  11. <view class="cont-title ">
  12. <view class="dtitle" style="margin-top: 76upx;">
  13. <!-- <image class="limg" src="../../../static/images/ling.png" mode=""></image> -->
  14. <view class="title">
  15. 读道头条号都有什么?
  16. </view>
  17. <!-- <image class="limg" src="../../../static/images/ling.png" mode=""></image> -->
  18. </view>
  19. <view class="ftitle">
  20. 头条号资源({{typeconfig.num}}个微信头条号)
  21. </view>
  22. </view>
  23. <view class="content-list" v-for="(item, index) in typeContent" :key="index">
  24. <view class="weiixn-gzh " :class="'lin'+index">{{item.name}}</view>
  25. <view class="content-cont">
  26. <view class="list-ul" v-for="(items, indexs) in item.data" :key="indexs" @tap="weJump(items.ercode,items.link)">
  27. <view class="list-li">
  28. <view class="list-pic">
  29. <image :src="items.pic" mode=""></image>
  30. </view>
  31. <view class="list-title">{{items.name}}</view>
  32. <!-- <view class="list-desc">点击了解详情</view> -->
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. </view>
  38. <view class="footer">
  39. <view class="footer-cont">
  40. <view class="footer-btn">
  41. <view class="btn-title">
  42. <label class="btn-title-sz"> {{configbut_name0}}</label>
  43. <label class="btn-title-sz1"> {{configbut_name1}}</label>
  44. <text class=""></text>
  45. </view>
  46. <view class="btn-fdesc">{{config.but_title}}<text></text></view>
  47. </view>
  48. <view class="logocont">
  49. <view class="logos">
  50. <image class="logo" src="../../../static/images/icon_i.png" mode=""></image>
  51. <view class="logo-text">
  52. <text v-for="(item, index) in config.account" :key="index">{{item}}</text>
  53. </view>
  54. </view>
  55. <view class="code">
  56. <image class="codePic" :src="catePic" mode=""></image>
  57. <view class="codetext"><text class="codetext-s"> 长按二维码 获取更多</text> <text class="codetext-a">超级创意</text> </view>
  58. </view>
  59. </view>
  60. </view>
  61. <!-- 底部标签 -->
  62. <view class="business">
  63. <view class="businesscard">
  64. <image class="pic" :src="config.tel_pic" mode=""></image>
  65. <view class="cont">
  66. <view class="bus-cont">
  67. <view class="title1">{{config.but_count}} <text></text> </view>
  68. <view class="tel">
  69. <label class="tel-num">{{config.name}}:</label>
  70. <label class="tel-txt">{{config.phone}}</label>
  71. <text></text>
  72. </view>
  73. <view class="tel">
  74. <label class="tel-num">座&ensp;机:</label>
  75. <label class="tel-txt">{{config.tel}}</label>
  76. <text></text>
  77. </view>
  78. <view class="bus-desc">{{config.but_flag}}<text></text></view>
  79. </view>
  80. </view>
  81. <view class="rights1" @tap="tel">
  82. <image class="ri-tel" src="../../../static/images/phone.gif" mode=""></image>
  83. <!-- <view class="ri-tel">立即咨询</view> -->
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. <view class="mark" v-show="isShow">
  89. <view class="mark-content">
  90. <view class="mark-relative">
  91. <!-- 41upx -->
  92. <!-- <image class="mark-dj" :style="{'left':Ju+'rpx'}" src="../../static/images/dj.png" mode=""></image> -->
  93. <image class="mark-del" @tap="cancat" src="../../../static/images/del.png" mode=""></image>
  94. <view class="">
  95. <image class="qercode" :src="ercode" mode=""></image>
  96. </view>
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. </template>
  102. <script>
  103. var graceRichText = require("../../../components/richText.js");
  104. import share from '../../../components/share2.js'
  105. //#ifdef H5
  106. import jquery from '@/components/h5Shsre/jquery-3.5.1.min.js';
  107. var jweixin = require('jweixin-module')
  108. import Dever_Share from '@/components/h5Shsre/share.js';
  109. //#endif
  110. // import h5weixin from '@/components/h5Shsre/weixin.js';
  111. export default {
  112. data() {
  113. return {
  114. swiperCurrent: 0,
  115. pic: [],
  116. top: '',
  117. tabnum: 4,
  118. currentTab: 0, //预设当前项的值
  119. navScrollLeft: 0,
  120. currentTabs: 0,
  121. scrollLeft: 0, //tab标题的滚动条位置
  122. scrollTop: 0,
  123. account: [],
  124. phine: '',
  125. cate: [],
  126. listCase: [],
  127. cateid: '',
  128. desc: '',
  129. id: '',
  130. catePic: '',
  131. shares: '',
  132. config: '',
  133. type: '',
  134. poster:'',
  135. wechat:'',
  136. typeContent:[],
  137. typeconfig:'',
  138. isShow: false,
  139. ercode:'',
  140. configbut_name0:'',
  141. configbut_name1:''
  142. }
  143. },
  144. onLoad(e) {
  145. // uni.hideShareMenu()
  146. var that = this;
  147. console.log(2222, e)
  148. if (e) {
  149. that.type = e.type
  150. that.id = e.id
  151. }
  152. this.swiperChange = function(event) {
  153. var that = this;
  154. this.swiperCurrent = event.detail.current;
  155. }
  156. wx.loadFontFace({
  157. family: 'MFJinHei',
  158. source: 'url("https://trade.5dev.cn/cmmc/main/assets/mobile/css/MFJinHei_Noncommercial-Regular1.ttf")',
  159. // family: 'MFJinHei',
  160. // source: 'url("https://trade.5dev.cn/cmmc/main/assets/mobile/css/mfjin.TTF")',
  161. success: console.log
  162. })
  163. wx.getSystemInfo({
  164. success: (res) => {
  165. // this.setData({
  166. that.pixelRatio = res.pixelRatio,
  167. that.windowHeight = res.windowHeight,
  168. that.windowWidth = res.windowWidth
  169. // })
  170. }
  171. })
  172. this.getap()
  173. this.share()
  174. },
  175. onShow() {
  176. // this.con_list()
  177. },
  178. onShareAppMessage(e) {
  179. var that = this;
  180. console.log(111, e)
  181. // var pic = that.myshopShare.pic;
  182. var scene = uni.getStorageSync('scene', scene);
  183. return share.share('/pages/taBbar/Home/Home?id=' + this.config.id ,
  184. this.shares.home_name, this.shares.home_pic, 9)
  185. },
  186. methods: {
  187. ThePublicNumber(){
  188. uni.navigateTo({
  189. url:'../../content/ThePublicNumber/ThePublicNumber'
  190. })
  191. },
  192. share() {
  193. var that = this;
  194. var params = new Object()
  195. uni.request({
  196. // url: 'https://trade.5dev.cn/dudaowenlv/content/?l=api.share',
  197. url: this.host + 'api.share',
  198. data: params,
  199. method: 'GET',
  200. header: {
  201. 'content-type': 'application/json' // 默认值
  202. },
  203. success(res) {
  204. that.shares = res.data.data
  205. // //#ifdef H5
  206. // let button = false;
  207. // let uid = -1;
  208. // let project = 111;
  209. // let url = "http://cm.5dev.cn/wechat/share/?api.";
  210. // let param = {
  211. // title:'11111111111111',
  212. // img: res.data.data.home_pic,
  213. // desc:'222222222222',
  214. // url: window.location.href
  215. // };
  216. // console.log(89897, param);
  217. // Dever_Share.Init(uid, project, url, param, button);
  218. // //#endif
  219. console.log(2222, res)
  220. }
  221. })
  222. },
  223. getap() {
  224. var that = this;
  225. var params = new Object()
  226. params.type_id = 2;
  227. uni.showLoading({
  228. title: '加载中'
  229. });
  230. uni.request({
  231. // url: 'https://trade.5dev.cn/dudaowenlv/content/?api.home',
  232. // http://www.dudaowenlv.com/dudaowenlv/content/?l=
  233. url: this.host + 'l=api.getMediaList',
  234. data: params,
  235. method: 'GET',
  236. header: {
  237. 'content-type': 'application/json' // 默认值
  238. },
  239. success(res) {
  240. console.log(444444,res)
  241. that.typeContent=res.data.data.cate;
  242. that.typeconfig=res.data.data.type;
  243. that.pic = res.data.data.config.pic.split(",")
  244. that.top = res.data.data.config.top
  245. that.config = res.data.data.config
  246. that.account = res.data.data.config.account
  247. that.catePic = res.data.data.config.code
  248. var mob = res.data.data.config.phone;
  249. that.configbut_name0 = res.data.data.config.but_name[0];
  250. that.configbut_name1 = res.data.data.config.but_name[0]
  251. that.phine = mob.replace(/(\d{3})(\d{4})/, "$1 $2 ");
  252. uni.hideLoading();
  253. uni.hideNavigationBarLoading();
  254. uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
  255. }
  256. })
  257. },
  258. weJump(ercode, link) {
  259. if(link == '' && ercode != ''){
  260. this.ercode=ercode
  261. this.isShow=true;
  262. }else if(link == '' && ercode == ''){
  263. // return;
  264. }else{
  265. //#ifdef H5
  266. window.location.href=link;
  267. //#endif
  268. }
  269. },
  270. cancat(){
  271. this.isShow=false;
  272. },
  273. cateList() {
  274. var that = this;
  275. console.log(111136, that.cateid)
  276. uni.navigateTo({
  277. url: '../../content/List/List?cateid=' + that.cateid
  278. })
  279. },
  280. list(event) {
  281. // event.currentTarget.dataset.id
  282. // console.log(22222,event.currentTarget.dataset.id)
  283. var id = event.currentTarget.dataset.id
  284. uni.navigateTo({
  285. url: '../../content/List-dl/List-dl?id=' + id
  286. })
  287. },
  288. tel() {
  289. var that = this;
  290. uni.makePhoneCall({
  291. phoneNumber: that.phine
  292. });
  293. }
  294. }
  295. }
  296. </script>
  297. <style lang="less">
  298. body{
  299. font-size: 6px;
  300. }
  301. /* <image class="weiixn-pic1" class="" src="../../../static/images/dud.jpg" mode=""></image> */
  302. /* <image class="weiixn-pic2" src="../../../static/images/w.jpg" mode=""></image> */
  303. .weiixn{
  304. overflow: hidden;
  305. _zoom:1;
  306. padding: 20rpx 0rpx;
  307. background: #FFFFFF;
  308. }
  309. .weiixn-pic1{
  310. float: left;
  311. width:375rpx;
  312. height: auto;
  313. display: block;
  314. }
  315. .weiixn-pic2{
  316. float: right;
  317. width: 375rpx;
  318. height: auto;
  319. display: block;
  320. }
  321. .bg {
  322. // background: #f7f7f7;
  323. }
  324. /* 轮播自定义样式 */
  325. .swipercontent {
  326. position: relative;
  327. }
  328. .swiper-box {
  329. background: #fff;
  330. }
  331. .slide-image {
  332. width: 100%;
  333. height: 454upx;
  334. display: block;
  335. }
  336. .swiper-box .uni-swiper-dots {
  337. position: absolute;
  338. margin: 0 auto !important;
  339. top: 316upx;
  340. }
  341. .swiper-box .uni-swiper-dot {
  342. width: 19upx;
  343. display: inline-flex;
  344. height: 7upx;
  345. margin-right: 20upx;
  346. justify-content: space-between;
  347. }
  348. .swiper-box .uni-swiper-dot::before {
  349. content: '';
  350. flex-grow: 1;
  351. background: #e0e0e0;
  352. }
  353. .swiper-box .uni-swiper-dot-active::before {
  354. background: #2f2f2f;
  355. border-radius: 4upx;
  356. }
  357. .swipercontent {
  358. position: relative;
  359. }
  360. .dots {
  361. position: absolute;
  362. left: 0;
  363. right: 0;
  364. bottom: 0upx;
  365. display: flex;
  366. justify-content: center;
  367. }
  368. .dot {
  369. margin: 0 8upx;
  370. width: 21upx;
  371. height: 9upx;
  372. background: #333;
  373. border-radius: 16upx;
  374. }
  375. .dot.active {
  376. width: 21upx;
  377. background: #dfdfdf;
  378. }
  379. /* 结束 */
  380. /* 内容 */
  381. .introduce {
  382. /* font-size: 30upx;
  383. font-family: PingFang-SC-Regular;
  384. font-weight: 400;
  385. color: rgba(51, 51, 51, 1);
  386. padding: 55upx 34upx; */
  387. /* background: #ED7D31; */
  388. margin-top: 24upx;
  389. background: #ED7D31;
  390. color: #FFFFFF;
  391. }
  392. .grace-rich-text {
  393. font-size: 24upx;
  394. font-family: PingFang-SC-Regular;
  395. font-weight: 400;
  396. line-height: 45upx;
  397. /* color: rgba(51, 51, 51, 1); */
  398. padding: 45upx 55upx;
  399. }
  400. /* tab切换列表 */
  401. /* 列表 */
  402. .listening {
  403. // background: #FFFFFF;
  404. padding-bottom: 48upx;
  405. }
  406. .list {
  407. margin: 0 12upx;
  408. // padding-top: 31upx;
  409. /* display:flex; */
  410. overflow: hidden;
  411. _zoom: 1;
  412. // margin-bottom: 61upx;
  413. }
  414. .listcent {
  415. margin-left: 66upx;
  416. float: left;
  417. width: 268upx;
  418. height: 245upx;
  419. background: #FFFFFF;
  420. border: 1upx solid #DBDBDB;
  421. margin-bottom: 30upx;
  422. // box-sizing: border-box;
  423. }
  424. .listPic {
  425. display: block;
  426. width: 268upx;
  427. height: 170upx;
  428. // border-radius: 10upx 10upx 0px 0px;
  429. }
  430. /* */
  431. .biaot {
  432. background: #fff;
  433. text-align: center;
  434. }
  435. .bt {
  436. font-size: 18upx;
  437. line-height: 18upx;
  438. font-family: PingFang-SC-Regular;
  439. font-weight: bold;
  440. color: #333333;
  441. padding: 16upx 0upx 8upx 0upx;
  442. overflow: hidden;
  443. text-overflow: ellipsis;
  444. white-space: nowrap;
  445. }
  446. .bts{
  447. margin: 0 auto !important;
  448. }
  449. .xianq {
  450. overflow: hidden;
  451. _zoom: 1;
  452. margin: 0 81upx;
  453. }
  454. .text {
  455. font-size: 24upx;
  456. font-family: PingFang-SC-Regular;
  457. font-weight: 400;
  458. color: rgba(102, 102, 102, 1);
  459. float: left;
  460. }
  461. .jt {
  462. width: 14upx;
  463. height: 16upx;
  464. float: right;
  465. display: block;
  466. margin-top: 11upx;
  467. }
  468. .btn {
  469. padding-bottom: 82upx;
  470. }
  471. .btn-cont {
  472. margin: 0 155upx;
  473. height: 70upx;
  474. background: #f4f4f4;
  475. /* box-shadow:3upx 5upx 134upx 7upx rgba(7,7,7,0.13); */
  476. /* opacity:0.2; */
  477. border-radius: 35upx;
  478. overflow: hidden;
  479. _zoom: 1;
  480. padding: 0 107upx;
  481. }
  482. .anli {
  483. font-size: 30upx;
  484. font-family: PingFang-SC-Regular;
  485. font-weight: bold;
  486. color: rgba(102, 102, 102, 1);
  487. line-height: 70upx;
  488. float: left;
  489. }
  490. .gd {
  491. width: 30upx;
  492. height: 29upx;
  493. float: right;
  494. margin-top: 22upx;
  495. }
  496. .footer-cont {
  497. padding: 72upx 73upx 37upx 86upx;
  498. background: #FFFFFF;
  499. }
  500. .tag {
  501. overflow: hidden;
  502. _zoom: 1;
  503. }
  504. .labels {
  505. overflow: hidden;
  506. _zoom: 1;
  507. float: left;
  508. /* display: inline-block; */
  509. /* display: flex; */
  510. }
  511. .label {
  512. font-size: 26upx;
  513. font-family: SourceHanSansCN-Medium;
  514. font-weight: 500;
  515. color: rgba(255, 255, 255, 1);
  516. float: left;
  517. }
  518. .lxian {
  519. font-size: 26upx;
  520. font-family: SourceHanSansCN-Medium;
  521. font-weight: 500;
  522. color: rgba(255, 255, 255, 1);
  523. float: left;
  524. margin: 0 4upx;
  525. }
  526. .labels:last-child .lxian {
  527. font-size: 0upx;
  528. float: left;
  529. margin: 0;
  530. }
  531. .labels:first-child .lxian {
  532. font-size: 0upx;
  533. float: left;
  534. margin: 0;
  535. }
  536. .telpic {
  537. width: 37upx;
  538. height: 41upx;
  539. float: left;
  540. display: block;
  541. margin-right: 20upx;
  542. }
  543. .laos {
  544. /* font-family: MFJinHei; */
  545. /* font-weight: bold; */
  546. font-size: 34upx;
  547. color: #FFFFFF;
  548. float: left;
  549. }
  550. .phine {
  551. /* font-family: MFJinHei; */
  552. letter-spacing: 2upx;
  553. /* font-weight: bold; */
  554. font-size: 34upx;
  555. color: #FFFFFF;
  556. float: left;
  557. }
  558. .bohao {
  559. width: 36upx;
  560. height: 40upx;
  561. display: block;
  562. float: left;
  563. margin-left: 38upx;
  564. margin-top: 5upx;
  565. }
  566. .tjt {
  567. width: 39upx;
  568. height: 28upx;
  569. display: block;
  570. float: left;
  571. margin-left: 12upx;
  572. margin-top: 12upx;
  573. }
  574. .footer-btn {
  575. width: 100%;
  576. }
  577. .footer-btn view {
  578. text-align: justify;
  579. display: inline-block;
  580. text-align-last: justify;
  581. text-justify: inter-ideograph;
  582. vertical-align: top;
  583. }
  584. .footer-btn view text {
  585. display: inline-block;
  586. height: 0;
  587. width: 100%
  588. /* 换行 */
  589. }
  590. .btn-title {
  591. display: flex;
  592. font-size: 58upx;
  593. font-family: Source Han Sans CN;
  594. font-weight: 800;
  595. color: rgba(220, 66, 66, 1);
  596. line-height: 58upx;
  597. margin-bottom: 14rpx;
  598. height: 58rpx;
  599. width: 100%;
  600. }
  601. .btn-title-sz {
  602. color: #ED7D31;
  603. }
  604. .btn-title-sz1 {
  605. color: #211717;
  606. }
  607. .btn-fdesc {
  608. width: 100%;
  609. font-size: 32upx;
  610. font-family: Source Han Sans CN;
  611. font-weight: 400;
  612. color: rgba(51, 51, 51, 1);
  613. line-height: 32upx;
  614. height: 32rpx;
  615. text-align: center;
  616. margin-bottom: 24rpx;
  617. }
  618. .logocont {
  619. overflow: hidden;
  620. _zoom: 1;
  621. /* margin-top: 42upx; */
  622. }
  623. .logos {
  624. float: left;
  625. width: 352upx;
  626. margin-top: 15upx;
  627. }
  628. .logo {
  629. width: 324upx;
  630. height: 160upx;
  631. display: block;
  632. margin: 0 auto;
  633. }
  634. .logo-text {
  635. text-align: center;
  636. font-size: 28upx;
  637. font-family: Source Han Sans CN;
  638. font-weight: 400;
  639. color: rgba(51, 51, 51, 1);
  640. line-height: 28upx;
  641. margin-top: 20rpx;
  642. }
  643. .code {
  644. float: right;
  645. }
  646. .codePic {
  647. width: 210upx;
  648. height: 210upx;
  649. display: block;
  650. }
  651. .codetext {
  652. text-align: center;
  653. font-size: 16upx;
  654. font-family: Source Han Sans CN;
  655. font-weight: 400;
  656. color: rgba(51, 51, 51, 1);
  657. line-height: 16upx;
  658. }
  659. .codetext-s {
  660. color: #333333;
  661. }
  662. .codetext-a {
  663. color: #ED7D31;
  664. }
  665. @keyframes move {
  666. 0%,
  667. 5% {
  668. -webkit-transform: rotate(0deg);
  669. transform: rotate(0deg);
  670. }
  671. 15% {
  672. -webkit-transform: rotate(0deg);
  673. transform: rotate(0deg);
  674. }
  675. 25% {
  676. -webkit-transform: rotate(0deg);
  677. transform: rotate(0deg);
  678. }
  679. 35% {
  680. -webkit-transform: rotate(0deg);
  681. transform: rotate(0deg);
  682. }
  683. 45% {
  684. -webkit-transform: rotate(0deg);
  685. transform: rotate(0deg);
  686. }
  687. 55% {
  688. -webkit-transform: rotate(0deg);
  689. transform: rotate(0deg);
  690. }
  691. 60% {
  692. -webkit-transform: rotate(0deg);
  693. transform: rotate(0deg);
  694. }
  695. 65% {
  696. -webkit-transform: rotate(0deg);
  697. transform: rotate(0deg);
  698. }
  699. 70% {
  700. -webkit-transform: rotate(6deg);
  701. transform: rotate(6deg);
  702. }
  703. 75% {
  704. -webkit-transform: rotate(-6deg);
  705. transform: rotate(-6deg);
  706. }
  707. 80% {
  708. -webkit-transform: rotate(6deg);
  709. transform: rotate(6deg);
  710. }
  711. 85% {
  712. -webkit-transform: rotate(-6deg);
  713. transform: rotate(-6deg);
  714. }
  715. 90% {
  716. -webkit-transform: rotate(6deg);
  717. transform: rotate(6deg);
  718. }
  719. 95% {
  720. -webkit-transform: rotate(-6deg);
  721. transform: rotate(-6deg);
  722. }
  723. 100% {
  724. -webkit-transform: rotate(0deg);
  725. transform: rotate(0deg);
  726. }
  727. }
  728. .tjt {
  729. animation: move 1s 0s infinite;
  730. -webkit-animation: move 1s 0s infinite;
  731. }
  732. .tjt {
  733. position: relative;
  734. animation: myfirst 1s 0s infinite;
  735. -webkit-animation: myfirst 1s linear 1s infinite alternate;
  736. }
  737. @keyframes myfirst {
  738. 0% {
  739. left: 0px;
  740. }
  741. 25% {
  742. left: 3px;
  743. }
  744. 50% {
  745. left: 6px;
  746. }
  747. 75% {
  748. left: 3px;
  749. }
  750. 100% {
  751. left: 0px;
  752. }
  753. }
  754. /* 底部 */
  755. .business {
  756. width: 100%;
  757. background: #ED7D31;
  758. }
  759. .businesscard {
  760. height: 190upx;
  761. overflow: hidden;
  762. _zoom: 1;
  763. padding: 0 42upx 0 53upx;
  764. display: flex;
  765. }
  766. .left {
  767. }
  768. .rights1 {
  769. margin-top: 13upx;
  770. margin-left: 10rpx;
  771. }
  772. .ri-tel {
  773. width: 103upx;
  774. height: 173upx;
  775. display: block;
  776. }
  777. .phone {
  778. overflow: hidden;
  779. _zoom: 1;
  780. display: flex;
  781. }
  782. .pic {
  783. width: 154upx;
  784. height: 154upx;
  785. /* border-radius: 50%; */
  786. display: block;
  787. margin: 18upx 20upx 0 0upx;
  788. display: block;
  789. /* margin-bottom: 17upx; */
  790. }
  791. .bus-cont view{
  792. /* text-align: justify;
  793. text-align-last: justify; */
  794. text-align: justify;
  795. display: inline-block;
  796. text-align-last: justify;
  797. text-justify: inter-ideograph;
  798. vertical-align: top;
  799. width: 100%;
  800. margin-bottom: 10upx;
  801. }
  802. .bus-cont view text {
  803. display: inline-block;
  804. height:0;
  805. width:100% /* 换行 */
  806. }
  807. .title1 {
  808. margin-top: 26upx;
  809. margin-bottom: 17rpx;
  810. font-size: 28upx;
  811. height: 28upx;
  812. line-height: 28upx;
  813. /* font-weight:bold; */
  814. color: #fff;
  815. }
  816. .tel {
  817. color: #fff;
  818. font-size: 30upx;
  819. line-height: 30upx;
  820. height: 30upx;
  821. display: flex;
  822. }
  823. .tel-num {
  824. width: 52upx;
  825. text-align: justify;
  826. }
  827. .tel-txt {
  828. letter-spacing: 6upx;
  829. }
  830. .bus-desc {
  831. font-size: 20upx;
  832. font-family: Source Han Sans CN;
  833. font-weight: 400;
  834. line-height: 20upx;
  835. color: #fff;
  836. height: 20upx;
  837. }
  838. .cont {
  839. overflow: hidden;
  840. _zoom: 1;
  841. flex: 1;
  842. }
  843. .bustag {
  844. overflow: hidden;
  845. _zoom: 1;
  846. }
  847. .bustext {
  848. overflow: hidden;
  849. _zoom: 1;
  850. float: left;
  851. /* margin-bottom: 30upx; */
  852. }
  853. .buslxian {
  854. float: left;
  855. font-size: 30upx;
  856. font-family: PingFang-SC-Medium;
  857. font-weight: 500;
  858. color: rgba(255, 255, 255, 1);
  859. margin: 0 6upx;
  860. }
  861. .bustext:first-child .buslxian {
  862. float: left;
  863. font-size: 0upx;
  864. font-family: PingFang-SC-Medium;
  865. font-weight: 500;
  866. color: rgba(255, 255, 255, 1);
  867. margin: 0;
  868. }
  869. .bust {
  870. float: left;
  871. font-size: 30upx;
  872. font-family: PingFang-SC-Medium;
  873. font-weight: 500;
  874. color: rgba(255, 255, 255, 1);
  875. }
  876. .btnPic {
  877. width: 100%;
  878. display: block;
  879. }
  880. /* 新增 */
  881. /* 大标题 */
  882. .cont-title {
  883. // background: #FFFFFF;
  884. }
  885. .h {
  886. margin-top: 20upx;
  887. }
  888. .dtitle {
  889. overflow: hidden;
  890. _zoom: 1;
  891. display: flex;
  892. justify-content: center;
  893. margin: 0 auto;
  894. }
  895. .title {
  896. font-size: 44upx;
  897. font-family: PingFang-SC-Medium;
  898. font-weight: bold;
  899. color: rgba(34, 34, 34, 1);
  900. padding: 0 24upx;
  901. float: left;
  902. }
  903. .limg {
  904. float: left;
  905. width: 35upx;
  906. height: 15upx;
  907. display: block;
  908. margin-top: 22upx;
  909. }
  910. .ftitle {
  911. margin-top: 8upx;
  912. font-size: 24upx;
  913. font-family: PingFang-SC-Medium;
  914. font-weight: 500;
  915. color: rgba(51, 51, 51, 1);
  916. text-align: center;
  917. }
  918. .weiixn-gzh{
  919. width: 176upx;
  920. height: 44upx;
  921. background: #ED7D31;
  922. border-radius: 6upx;
  923. font-size: 26upx;
  924. font-family: Source Han Sans CN;
  925. font-weight: bold;
  926. color: #FFFFFF;
  927. line-height: 44upx;
  928. text-align: center;
  929. margin: 0 auto;
  930. margin-bottom: 28upx;
  931. }
  932. .weiixn-gzhs{
  933. width: 236upx;
  934. height: 44upx;
  935. background: #ED7D31;
  936. border-radius: 6upx;
  937. font-size: 26upx;
  938. font-family: Source Han Sans CN;
  939. font-weight: bold;
  940. color: #FFFFFF;
  941. line-height: 44upx;
  942. text-align: center;
  943. margin: 0 auto;
  944. margin-top: 34upx;
  945. margin-bottom: 28upx;
  946. }
  947. /* 公众号列表 */
  948. .content{
  949. background: #FFFFFF;
  950. // padding-bottom:60upx ;
  951. }
  952. .content-list{
  953. // padding: 0 30upx;
  954. }
  955. .content-cont{
  956. overflow: hidden;
  957. _zoom:1;
  958. }
  959. .list-ul{
  960. float: left;
  961. margin-left: 38upx;
  962. }
  963. .list-li{
  964. width: 140upx;
  965. margin-bottom: 40upx;
  966. }
  967. .list-pic{
  968. image{
  969. width: 140upx;
  970. height: 140upx;
  971. // background: #A22D26;
  972. border-radius: 70upx;
  973. display: block;
  974. }
  975. }
  976. .list-title{
  977. font-size: 18upx;
  978. font-family: Source Han Sans CN;
  979. font-weight: bold;
  980. color: #333333;
  981. // line-height: 18upx;
  982. text-align: center;
  983. margin: 14upx 0 8upx 0;
  984. overflow: hidden;
  985. text-overflow:ellipsis;
  986. white-space: nowrap;
  987. }
  988. .list-desc{
  989. width: 96upx;
  990. height: 26upx;
  991. border: 1upx solid rgba(189, 194, 196, 0.99);
  992. border-radius: 2upx;
  993. font-size: 12upx;
  994. text-align: center;
  995. line-height: 26upx;
  996. font-family: Source Han Sans CN;
  997. font-weight: 400;
  998. color: #333333;
  999. margin: 0 36upx;
  1000. box-sizing: border-box;
  1001. -webkit-text-size-adjust: 100%;
  1002. }
  1003. .ljgd{
  1004. width: 212upx;
  1005. height: 43upx;
  1006. border: 1upx solid #DD2B2E;
  1007. border-radius: 3upx;
  1008. display: flex;
  1009. justify-content: center;
  1010. align-items: center;
  1011. margin: 0 auto;
  1012. .ljgd-pic{
  1013. image{
  1014. width: 30upx;
  1015. height: 30upx;
  1016. display: block;
  1017. margin-right: 12upx;
  1018. }
  1019. }
  1020. .ljgd-text{
  1021. line-height: 20upx;
  1022. font-size: 20upx;
  1023. font-family: Microsoft YaHei;
  1024. font-weight: bold;
  1025. color: #444444;
  1026. }
  1027. }
  1028. .lic{
  1029. width: 173upx;
  1030. height: 35upx;
  1031. border: 1upx solid #DD2B2E;
  1032. border-radius: 3px;
  1033. display: flex;
  1034. justify-content: center;
  1035. align-items: center;
  1036. // margin: 0 auto;
  1037. margin-top: 14upx;
  1038. .ljgd-pic{
  1039. image{
  1040. width: 27upx;
  1041. height: 27upx;
  1042. display: block;
  1043. margin-right: 12upx;
  1044. }
  1045. }
  1046. .ljgd-text{
  1047. line-height: 16upx;
  1048. font-size: 16upx;
  1049. font-family: Microsoft YaHei;
  1050. font-weight: bold;
  1051. color: #444444;
  1052. }
  1053. }
  1054. .lin1{
  1055. margin-top: 38upx;
  1056. }
  1057. .lin2{
  1058. margin-top: 60upx;
  1059. }
  1060. .links{
  1061. margin-top: 8upx;
  1062. }
  1063. .mark {
  1064. position: fixed;
  1065. left: 0;
  1066. top: 0;
  1067. right: 0;
  1068. bottom: 0;
  1069. background: rgba(0, 0, 0, 0.5);
  1070. z-index: 9999999;
  1071. }
  1072. .mark-content {
  1073. position: absolute;
  1074. left: 0;
  1075. top: 0;
  1076. right: 0;
  1077. bottom: 0;
  1078. margin: auto;
  1079. z-index: 9;
  1080. width: 500upx;
  1081. height: 500upx;
  1082. background: #FFFFFF;
  1083. border-radius: 16upx;
  1084. }
  1085. .mark-relative {
  1086. position: relative;
  1087. }
  1088. .mark-del {
  1089. width: 30upx;
  1090. height: 30upx;
  1091. display: block;
  1092. position: absolute;
  1093. right: 0;
  1094. padding: 22upx 20upx 0 0;
  1095. }
  1096. .qercode{
  1097. width: 320upx;
  1098. height: 320upx;
  1099. display: block;
  1100. margin: 0 auto;
  1101. padding-top: 90upx;
  1102. }
  1103. </style>