SldDiy.vue 60 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827
  1. <template>
  2. <div class="sld_diy">
  3. <div v-for="(item, index) in decorateData.data" v-bind:key="index">
  4. <el-carousel
  5. v-if="item.json_data && item.json_data.type == 'main_banner'"
  6. height="457px"
  7. arrow="never"
  8. >
  9. <el-carousel-item
  10. v-for="(item_banner, index_banner) in item.json_data.data"
  11. :key="index_banner"
  12. >
  13. <a href="javascript:void(0)" @click="diyNavTo(item_banner)">
  14. <img v-bind:src="item_banner.imgUrl" />
  15. </a>
  16. </el-carousel-item>
  17. </el-carousel>
  18. <div class="home-slider" v-if="item.json_data && item.json_data.type == 'main_banner_pc'">
  19. <div class="s1">
  20. <CategorySortTop/>
  21. </div>
  22. <div class="s2">
  23. <el-carousel
  24. v-if="item.json_data && item.json_data.type == 'main_banner_pc'"
  25. height="306px"
  26. arrow="never"
  27. >
  28. <el-carousel-item
  29. v-for="(item_banner, index_banner) in item.json_data.data"
  30. :key="index_banner"
  31. >
  32. <a href="javascript:void(0)" @click="diyNavTo(item_banner)">
  33. <img v-bind:src="item_banner.imgUrl" />
  34. <!-- <div :style="`background-image:url(${item_banner.imgUrl})`"></div> -->
  35. </a>
  36. </el-carousel-item>
  37. </el-carousel>
  38. </div>
  39. <div class="s3">
  40. <a href="javascript:void(0)" @click="diyNavTo(item.json_data.info.left)">
  41. <p class="title" >
  42. {{ item.json_data.info.left.title.initialValue }}
  43. </p>
  44. </a>
  45. <p class="link" v-if="!filtersStore.getLoginFlag">
  46. <nuxt-link to="/login">
  47. <span>{{L['登录']}}</span>
  48. </nuxt-link>
  49. </p>
  50. <p class="link" v-if="!filtersStore.getLoginFlag">
  51. <nuxt-link to="/register">
  52. <span>{{L['注册']}}</span>
  53. </nuxt-link>
  54. </p>
  55. <p class="link" @click="loginOut" v-if="filtersStore.getLoginFlag">
  56. <a >{{L['退出']}}</a>
  57. </p>
  58. <!-- <p class="link">-->
  59. <!-- <nuxt-link to="/home/contact">-->
  60. <!-- <span>{{L['发布需求']}}</span>-->
  61. <!-- </nuxt-link>-->
  62. <!-- </p>-->
  63. <p class="link" @click="goSupplierUrl">
  64. <!-- <nuxt-link to="http://seller.b2b.test.advichcloud.com/user/login">-->
  65. <a>{{L['供应商']}}</a>
  66. <!-- </nuxt-link>-->
  67. </p>
  68. <a href="javascript:void(0)" v-for="(val, key) in item.json_data.info.right"
  69. :key="key"
  70. @click="diyNavTo(val)">
  71. <p class="desc">
  72. {{ quillEscapeToHtml(val.title.initialValue) }}
  73. </p>
  74. </a>
  75. </div>
  76. </div>
  77. <!-- adv_01 start-->
  78. <div
  79. class="adv_01_wrap"
  80. v-if="item.json_data && item.json_data.type == 'adv_01'"
  81. :class="{
  82. adv_01_wrap_full: item.json_data.full_screen && item.json_data.full_screen == 1,
  83. }"
  84. :style="{
  85. height: item.json_data.data.height + 'px',
  86. paddingTop: item.json_data.padding_top + 'px',
  87. paddingBottom: item.json_data.padding_bottom + 'px',
  88. backgroundColor: item.json_data.bg_color,
  89. }"
  90. >
  91. <a href="javascript:void(0)" @click="diyNavTo(item.json_data.data)">
  92. <img class="adv_01_img" v-bind:src="item.json_data.data.imgUrl" />
  93. </a>
  94. </div>
  95. <!-- adv_01 end-->
  96. <!-- adv_02 start-->
  97. <div
  98. class="adv_02_part"
  99. v-if="item.json_data && item.json_data.type == 'adv_02'"
  100. :style="{
  101. height:
  102. (item.json_data.padding_top ? item.json_data.padding_top : 0) +
  103. (item.json_data.padding_bottom ? item.json_data.padding_bottom : 0) +
  104. 344 +
  105. 'px',
  106. paddingTop: item.json_data.padding_top + 'px',
  107. paddingBottom: item.json_data.padding_bottom + 'px',
  108. backgroundColor: item.json_data.bg_color,
  109. }"
  110. >
  111. <div class="adv_02_left" @click="diyNavTo(item.json_data.left.data)">
  112. <a
  113. href="javascript:void(0)"
  114. v-if="item.json_data.left.data.imgUrl != undefined"
  115. >
  116. <img v-bind:src="item.json_data.left.data.imgUrl" />
  117. </a>
  118. </div>
  119. <div class="adv_02_center">
  120. <span class="split_h"></span>
  121. <div
  122. class="goods_item clearfix"
  123. v-for="(item_center, index_center) in item.json_data.center.data.goods_data"
  124. v-bind:key="index_center"
  125. @click="goGoodsDetail(item_center)"
  126. >
  127. <a target="_blank" href="javascript:void(0)">
  128. <div class="left">
  129. <img v-bind:src="item_center.mainImage" />
  130. </div>
  131. <div class="right">
  132. <p class="goods_name">{{ item_center.goodsName }}</p>
  133. <!-- <p class="buy_num">-->
  134. <!-- {{ item_center.actualSales * 1 + item_center.virtualSales * 1-->
  135. <!-- }}{{ L["人购买"] }}-->
  136. <!-- </p>-->
  137. <!-- <div class="price">-->
  138. <!-- <span class="unit">&yen;</span>-->
  139. <!-- <span class="integer">{{ item_center.goodsPrice }}</span>-->
  140. <!-- </div>-->
  141. <!-- <a class="buy" href="javascript:void(0)">{{ L["立即抢购"] }}</a>-->
  142. </div>
  143. </a>
  144. </div>
  145. <span class="split_v"></span>
  146. </div>
  147. <div class="adv_02_right">
  148. <span
  149. class="right_img_item"
  150. v-for="(item_right, index_right) in item.json_data.right.data"
  151. v-bind:key="index_right"
  152. @click="diyNavTo(item_right)"
  153. >
  154. <a href="javascript:void(0)">
  155. <img v-bind:src="item_right.imgUrl" />
  156. </a>
  157. </span>
  158. </div>
  159. </div>
  160. <!-- adv_02 end-->
  161. <!-- adv_04 start-->
  162. <div
  163. class="w_sld_react_1210 adv_04_wrap"
  164. v-if="item.json_data && item.json_data.type == 'adv_04'"
  165. :style="{
  166. paddingTop: item.json_data.padding_top + 'px',
  167. paddingBottom: item.json_data.padding_bottom + 'px',
  168. backgroundColor: item.json_data.bg_color,
  169. }"
  170. >
  171. <div class="floor_title">
  172. <h2>
  173. <font
  174. v-bind:style="{ backgroundColor: item.json_data.title_info.title_color }"
  175. >&nbsp;</font
  176. >
  177. <span v-bind:style="{ color: item.json_data.title_info.title_color }">{{
  178. item.json_data.title_info.title_name
  179. }}</span>
  180. <font
  181. v-bind:style="{ backgroundColor: item.json_data.title_info.title_color }"
  182. >&nbsp;</font
  183. >
  184. </h2>
  185. </div>
  186. <div class="floor_goods">
  187. <div
  188. class="item"
  189. v-for="(item_main, index_main) in item.json_data.data.goods_data"
  190. v-bind:key="index_main"
  191. >
  192. <div class="wrap">
  193. <router-link
  194. target="_blank"
  195. :to="'/goods/detail/'+ calcProductName(item_main.goodsName) +'_'+ item_main.productId"
  196. >
  197. <div href="javascript:void(0)" class="example_text">
  198. <img v-bind:src="item_main.mainImage" />
  199. </div>
  200. <p class="title">
  201. <a href="javascript:void(0)" title>{{ item_main.goodsName }}</a>
  202. </p>
  203. <!-- <p class="price">-->
  204. <!-- <span>-->
  205. <!-- <span class="money_number">{{ item_main.goodsMoney || '面议' }}</span>-->
  206. <!-- </span>-->
  207. <!-- </p>-->
  208. </router-link>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. <!-- adv_04 end-->
  214. <!-- adv_05 start-->
  215. <div
  216. class="w_sld_react_1210 adv_05_wrap"
  217. v-if="item.json_data && item.json_data.type == 'adv_05'"
  218. :style="{
  219. paddingTop: item.json_data.padding_top + 'px',
  220. paddingBottom: item.json_data.padding_bottom + 'px',
  221. backgroundColor: item.json_data.bg_color,
  222. }"
  223. >
  224. <div class="floor">
  225. <div class="floor_layout">
  226. <div>
  227. <div class="floor_title">
  228. <h2>
  229. <span class="main_title">{{
  230. item.json_data.title_info.title.initialValue
  231. }}</span>
  232. <span class="sub_title">{{
  233. item.json_data.title_info &&
  234. item.json_data.title_info.sub_title.initialValue
  235. }}</span>
  236. </h2>
  237. <div class="right_action" v-if="item.json_data.title_info.link_type">
  238. <a @click="diyNavTo(item.json_data.title_info)">
  239. {{ L["查看更多"] }}
  240. <i>&gt;&gt;</i>
  241. </a>
  242. </div>
  243. </div>
  244. <div class="floor_content">
  245. <div class="floor_left">
  246. <div class="floor_bg_img">
  247. <a
  248. class="ad_img example_text"
  249. href="javascript:void(0)"
  250. @click="diyNavTo(item.json_data.left.data)"
  251. >
  252. <img v-bind:src="item.json_data.left.data.imgUrl" />
  253. </a>
  254. </div>
  255. <div class="floor_words">
  256. <div class="floor_words_top_title">
  257. <font></font>
  258. <span>{{
  259. item.json_data.left.cat_data.title_info.title_name
  260. }}</span>
  261. <font></font>
  262. </div>
  263. <ul>
  264. <li
  265. v-for="(item_left_cat, index_left_cat) in item.json_data.left
  266. .cat_data.cat_datas"
  267. v-bind:key="index_left_cat"
  268. >
  269. <a
  270. href="javascript:void(0)"
  271. :title="item_left_cat.categoryName"
  272. @click="goGoodsListByCatId(item_left_cat.categoryId,item_left_cat.categoryName)"
  273. >{{ item_left_cat.categoryName }}</a
  274. >
  275. </li>
  276. </ul>
  277. </div>
  278. </div>
  279. <div class="floor_right" style="border-color: rgb(252, 88, 99)">
  280. <div class="floor_right_main">
  281. <div class="floor_content">
  282. <div
  283. class="big_item item"
  284. v-if="item.json_data.center.data.goods_data.length"
  285. >
  286. <div
  287. class="wrap"
  288. @click="goGoodsDetail(item.json_data.center.data.goods_data[0])"
  289. >
  290. <div class="left_pic">
  291. <a href="javascript:void(0)" class="ad_img example_text">
  292. <img
  293. v-bind:src="
  294. item.json_data.center.data.goods_data[0].mainImage
  295. "
  296. alt="item.json_data.center.data.goods_data[0].goodsName"
  297. />
  298. </a>
  299. </div>
  300. <div class="right_info">
  301. <p class="title">
  302. <a
  303. href="javascript:void(0)"
  304. :title="
  305. item.json_data.center.data.goods_data[0].goodsName
  306. "
  307. >{{
  308. item.json_data.center.data.goods_data[0].goodsName
  309. }}</a
  310. >
  311. </p>
  312. <!-- <p class="price">-->
  313. <!-- <span class="money_number">{{-->
  314. <!-- item.json_data.center.data.goods_data[0].goodsMoney || '面议'-->
  315. <!-- }}</span>-->
  316. <!-- </p>-->
  317. </div>
  318. </div>
  319. </div>
  320. <div
  321. class="item"
  322. v-if="item.json_data.center.data.goods_data.length > 1"
  323. >
  324. <div
  325. class="wrap"
  326. @click="goGoodsDetail(item.json_data.center.data.goods_data[1])"
  327. >
  328. <a class="ad_img" href="javascript:void(0)">
  329. <img
  330. v-bind:src="
  331. item.json_data.center.data.goods_data[1].mainImage
  332. "
  333. alt="item.json_data.center.data.goods_data[1].goodsName"
  334. />
  335. </a>
  336. <p class="title">
  337. <a
  338. href="javascript:void(0)"
  339. :title="item.json_data.center.data.goods_data[1].goodsName"
  340. >{{ item.json_data.center.data.goods_data[1].goodsName }}</a
  341. >
  342. </p>
  343. <!-- <p class="price">-->
  344. <!-- <span class="money_number">{{-->
  345. <!-- item.json_data.center.data.goods_data[1].goodsMoney || '面议'-->
  346. <!-- }}</span>-->
  347. <!-- </p>-->
  348. </div>
  349. </div>
  350. <template
  351. v-for="(item_center_bottom, index_center_bottom) in item.json_data
  352. .center.data.goods_data"
  353. >
  354. <div
  355. class="item bottom_item"
  356. :key="index_center_bottom"
  357. v-if="index_center_bottom > 1"
  358. @click="goGoodsDetail(item_center_bottom)"
  359. >
  360. <div class="wrap">
  361. <a href="javascript:void(0)" class="ad_img example_text">
  362. <img
  363. v-bind:src="item_center_bottom.mainImage"
  364. alt="item_center_bottom.goodsName"
  365. />
  366. </a>
  367. <p class="title">
  368. <a
  369. href="javascript:void(0)"
  370. :title="item_center_bottom.goodsName"
  371. >{{ item_center_bottom.goodsName }}</a
  372. >
  373. </p>
  374. <!-- <p class="price">-->
  375. <!-- <span class="money_number">{{-->
  376. <!-- item_center_bottom.goodsMoney || '面议'-->
  377. <!-- }}</span>-->
  378. <!-- </p>-->
  379. </div>
  380. </div>
  381. </template>
  382. </div>
  383. </div>
  384. <div class="floor_right_new">
  385. <div class="floor_right_new_top_title">
  386. <font style="background: #fc585a"></font>
  387. <span style="color: #fc585a">{{
  388. item.json_data.right.title_info.title_name
  389. }}</span>
  390. <font style="background: #fc585a"></font>
  391. </div>
  392. <div class="floor_content">
  393. <div
  394. class="item"
  395. v-for="(item_right_goods, index_right_goods) in item.json_data
  396. .right.data.goods_data"
  397. v-bind:key="index_right_goods"
  398. >
  399. <div class="wrap" @click="goGoodsDetail(item_right_goods)">
  400. <div class="left_pic">
  401. <a href="javascript:void(0)" class="ad_img example_text">
  402. <img
  403. v-bind:src="item_right_goods.mainImage"
  404. alt="item_right_goods.goodsName"
  405. />
  406. </a>
  407. </div>
  408. <div class="right_info">
  409. <p class="title">
  410. <a
  411. href="javascript:void(0)"
  412. :title="item_right_goods.goodsName"
  413. >{{ item_right_goods.goodsName }}</a
  414. >
  415. </p>
  416. <!-- <p class="price">-->
  417. <!-- <span class="money_number">{{-->
  418. <!-- item_right_goods.goodsMoney || '面议'-->
  419. <!-- }}</span>-->
  420. <!-- </p>-->
  421. </div>
  422. </div>
  423. </div>
  424. </div>
  425. </div>
  426. </div>
  427. </div>
  428. </div>
  429. </div>
  430. </div>
  431. </div>
  432. <!-- adv_05 end-->
  433. <!-- adv_06 start-->
  434. <div
  435. v-if="item.json_data && item.json_data.type == 'adv_06'"
  436. class="adv_06 com_1210_center"
  437. :style="{
  438. paddingTop: item.json_data.padding_top + 'px',
  439. paddingBottom: item.json_data.padding_bottom + 'px',
  440. backgroundColor: item.json_data.bg_color,
  441. }"
  442. >
  443. <div class="adv_06_wrap">
  444. <div
  445. class="item"
  446. v-for="(item_child, index_child) in item.json_data.data"
  447. v-bind:key="index_child"
  448. >
  449. <a href="javascript:void(0)" @click="diyNavTo(item_child)">
  450. <img v-bind:src="item_child.imgUrl" />
  451. </a>
  452. </div>
  453. </div>
  454. </div>
  455. <!-- adv_06 end-->
  456. <!-- adv_07 start-->
  457. <div
  458. class="w_sld_react_1210 adv_07"
  459. v-if="item.json_data && item.json_data.type == 'adv_07'"
  460. :style="{
  461. paddingTop: item.json_data.padding_top + 'px',
  462. paddingBottom: item.json_data.padding_bottom + 'px',
  463. backgroundColor: item.json_data.bg_color,
  464. }"
  465. >
  466. <div class="adv_07_wrap">
  467. <div
  468. class="item"
  469. v-for="(item_child, index_child) in item.json_data.data"
  470. :key="index_child"
  471. >
  472. <a
  473. href="javascript:void(0);"
  474. @click="diyNavTo(item_child)"
  475. v-if="item_child.imgUrl"
  476. >
  477. <img :src="item_child.imgUrl" />
  478. </a>
  479. <a class="show_tip" href="javascript:void(0);" v-else>
  480. <span>此处添加【403*高度不限】图片</span>
  481. </a>
  482. </div>
  483. </div>
  484. </div>
  485. <!-- adv_07 end-->
  486. <!-- adv_08 start-->
  487. <div
  488. class="w_sld_react_1210 adv_08 com_1210_center"
  489. v-if="item.json_data && item.json_data.type == 'adv_08'"
  490. :style="{
  491. paddingTop: item.json_data.padding_top + 'px',
  492. paddingBottom: item.json_data.padding_bottom + 'px',
  493. backgroundColor: item.json_data.bg_color,
  494. }"
  495. >
  496. <div class="adv_08_wrap">
  497. <div
  498. class="item"
  499. v-for="(item_main, index_main) in item.json_data.data"
  500. v-bind:key="index_main"
  501. @click="diyNavTo(item_main)"
  502. >
  503. <a href="javascript:void(0)">
  504. <img v-bind:src="item_main.imgUrl" />
  505. </a>
  506. </div>
  507. </div>
  508. </div>
  509. <!-- adv_08 end-->
  510. <!-- adv_09 start-->
  511. <div
  512. class="adv_09 com_1210_center"
  513. v-if="item.json_data && item.json_data.type == 'adv_09'"
  514. :style="{
  515. paddingTop: item.json_data.padding_top + 'px',
  516. paddingBottom: item.json_data.padding_bottom + 'px',
  517. backgroundColor: item.json_data.bg_color,
  518. }"
  519. >
  520. <div class="adv_09_wrap">
  521. <div class="item left">
  522. <div
  523. class="top_title"
  524. v-bind:style="{
  525. backgroundColor: item.json_data.left.title_info.title_bg_color,
  526. color: item.json_data.left.title_info.title_color,
  527. }"
  528. >
  529. {{ item.json_data.left.title_info.title_name }}
  530. </div>
  531. <div class="main_con">
  532. <a
  533. class="first show_tip"
  534. href
  535. v-for="(item_left, index_left) in item.json_data.left.data"
  536. v-bind:key="index_left"
  537. @click="diyNavTo(item_left)"
  538. >
  539. <img v-bind:src="item_left.imgUrl" />
  540. </a>
  541. </div>
  542. </div>
  543. <div class="item center">
  544. <div
  545. class="top_title"
  546. v-bind:style="{
  547. backgroundColor: item.json_data.center.title_info.title_bg_color,
  548. color: item.json_data.center.title_info.title_color,
  549. }"
  550. >
  551. {{ item.json_data.center.title_info.title_name }}
  552. </div>
  553. <div class="main_con">
  554. <a
  555. class="show_tip"
  556. href
  557. v-for="(item_center, index_center) in item.json_data.center.data"
  558. v-bind:key="index_center"
  559. @click="diyNavTo(item_center)"
  560. >
  561. <img v-bind:src="item_center.imgUrl" />
  562. </a>
  563. </div>
  564. </div>
  565. <div class="item right">
  566. <div
  567. class="top_title"
  568. v-bind:style="{
  569. backgroundColor: item.json_data.right.title_info.title_bg_color,
  570. color: item.json_data.right.title_info.title_color,
  571. }"
  572. >
  573. {{ item.json_data.right.title_info.title_name }}
  574. </div>
  575. <div class="main_con">
  576. <a
  577. class="show_tip"
  578. href
  579. v-for="(item_right, index_right) in item.json_data.right.data"
  580. v-bind:key="index_right"
  581. @click="diyNavTo(item_right)"
  582. >
  583. <img v-bind:src="item_right.imgUrl" />
  584. </a>
  585. </div>
  586. </div>
  587. </div>
  588. </div>
  589. <!-- adv_09 end-->
  590. <!-- adv_10 start-->
  591. <div
  592. class="adv_10 com_1210_center"
  593. v-if="item.json_data && item.json_data.type == 'adv_10'"
  594. :style="{
  595. paddingTop: item.json_data.padding_top + 'px',
  596. paddingBottom: item.json_data.padding_bottom + 'px',
  597. backgroundColor: item.json_data.bg_color,
  598. }"
  599. >
  600. <div class="adv_10_wrap">
  601. <div
  602. class="row_one"
  603. v-for="(item_one, index_one) in item.json_data.row_one.data"
  604. v-bind:key="index_one"
  605. >
  606. <a href="javascript:void(0)" @click="diyNavTo(item_one)">
  607. <img v-bind:src="item_one.imgUrl" />
  608. </a>
  609. </div>
  610. <div class="row_four">
  611. <a
  612. href="javascript:void(0)"
  613. v-for="(item_four, index_four) in item.json_data.row_four.data"
  614. v-bind:key="index_four"
  615. @click="diyNavTo(item_four)"
  616. >
  617. <img v-bind:src="item_four.imgUrl" />
  618. </a>
  619. </div>
  620. <div class="row_five">
  621. <a
  622. href="javascript:void(0)"
  623. v-for="(item_five, index_five) in item.json_data.row_five.data"
  624. v-bind:key="index_five"
  625. @click="diyNavTo(item_five)"
  626. >
  627. <img v-bind:src="item_five.imgUrl" />
  628. </a>
  629. </div>
  630. </div>
  631. </div>
  632. <!-- adv_10 end-->
  633. <!-- adv_11 start-->
  634. <div
  635. class="adv_11 com_1210_center"
  636. v-if="item.json_data && item.json_data.type == 'adv_11'"
  637. :style="{
  638. paddingTop: item.json_data.padding_top + 'px',
  639. paddingBottom: item.json_data.padding_bottom + 'px',
  640. backgroundColor: item.json_data.bg_color,
  641. }"
  642. >
  643. <div class="adv_11_wrap">
  644. <div class="item row_left">
  645. <a
  646. href="javascript:void(0)"
  647. v-for="(item_left, index_left) in item.json_data.row_left.data"
  648. v-bind:key="index_left"
  649. v-bind:class="{ lb_margin: index_left % 2 == 1 }"
  650. @click="diyNavTo(item_left)"
  651. >
  652. <img v-bind:src="item_left.imgUrl" />
  653. </a>
  654. </div>
  655. <div class="item row_right">
  656. <div class="top">
  657. <a
  658. href="javascript:void(0)"
  659. v-if="item.json_data.row_right.top.data[0] != undefined"
  660. @click="diyNavTo(item.json_data.row_right.top.data[0])"
  661. >
  662. <img v-bind:src="item.json_data.row_right.top.data[0].imgUrl" />
  663. </a>
  664. </div>
  665. <div class="bottom">
  666. <a
  667. href="javascript:void(0)"
  668. v-if="item.json_data.row_right.bottom.data[0] != undefined"
  669. @click="diyNavTo(item.json_data.row_right.bottom.data[0])"
  670. >
  671. <img v-bind:src="item.json_data.row_right.bottom.data[0].imgUrl" />
  672. </a>
  673. </div>
  674. </div>
  675. </div>
  676. </div>
  677. <!-- adv_11 end-->
  678. <!-- adv_12 start-->
  679. <div
  680. class="adv_12 com_1210_center"
  681. v-if="item.json_data && item.json_data.type == 'adv_12'"
  682. :style="{
  683. paddingTop: item.json_data.padding_top + 'px',
  684. paddingBottom: item.json_data.padding_bottom + 'px',
  685. backgroundColor: item.json_data.bg_color,
  686. }"
  687. >
  688. <div class="adv_12_wrap">
  689. <div class="item left clear_padding">
  690. <a
  691. class="l_img"
  692. href="javascript:void(0)"
  693. @click="diyNavTo(item.json_data.left.data[0])"
  694. >
  695. <img v-bind:src="item.json_data.left.data[0].imgUrl" />
  696. </a>
  697. </div>
  698. <div class="item center">
  699. <a
  700. v-for="(item_center, index_center) in item.json_data.center.data"
  701. v-bind:key="index_center"
  702. v-bind:class="{ l_b_margin: index_center % 2 == 1 }"
  703. @click="diyNavTo(item_center)"
  704. >
  705. <img v-bind:src="item_center.imgUrl" />
  706. </a>
  707. </div>
  708. <div class="item right">
  709. <div class="title_wrap" @click="diyNavTo(item.json_data.right.title_info)">
  710. <a class="title" href="javascript:void(0)">{{
  711. item.json_data.right.title_info.title.initialValue
  712. }}</a>
  713. <span> 》</span>
  714. <a href="javascript:void(0)" class="subtitle">{{
  715. item.json_data.right.title_info.sub_title.initialValue
  716. }}</a>
  717. </div>
  718. <div class="img_top">
  719. <a
  720. href="javascript:void(0)"
  721. @click="diyNavTo(item.json_data.right.top.data[0])"
  722. >
  723. <img v-bind:src="item.json_data.right.top.data[0].imgUrl" />
  724. </a>
  725. </div>
  726. <div class="img_bottom">
  727. <a
  728. class="l_img"
  729. href="javascript:void(0)"
  730. v-for="(item_right_bottom, index_right_bottom) in item.json_data.right
  731. .bottom.data"
  732. v-bind:key="index_right_bottom"
  733. @click="diyNavTo(item_right_bottom)"
  734. >
  735. <img v-bind:src="item_right_bottom.imgUrl" />
  736. </a>
  737. </div>
  738. </div>
  739. </div>
  740. </div>
  741. <!-- adv_12 end-->
  742. <!-- adv_13 start-->
  743. <div
  744. class="w_sld_react_1210 adv_13 com_1210_center"
  745. v-if="item.json_data && item.json_data.type == 'adv_13'"
  746. :style="{
  747. paddingTop: item.json_data.padding_top + 'px',
  748. paddingBottom: item.json_data.padding_bottom + 'px',
  749. backgroundColor: item.json_data.bg_color,
  750. }"
  751. >
  752. <div class="adv_13_wrap">
  753. <div class="item right" @click="diyNavTo(item.json_data.left.title_info)">
  754. <div class="title_wrap">
  755. <a class="title" href="javascript:void(0)">{{
  756. item.json_data.left.title_info.title.initialValue
  757. }}</a>
  758. <span> 》</span>
  759. <a class="subtitle" href="javascript:void(0)">{{
  760. item.json_data.left.title_info.sub_title.initialValue
  761. }}</a>
  762. </div>
  763. <div class="img_top">
  764. <a
  765. class
  766. href="javascript:void(0)"
  767. @click="diyNavTo(item.json_data.left.top.data[0])"
  768. >
  769. <img v-bind:src="item.json_data.left.top.data[0].imgUrl" />
  770. </a>
  771. </div>
  772. <div class="img_bottom">
  773. <a
  774. class
  775. href="javascript:void(0)"
  776. v-for="(item_left_bottom, index_left_bottom) in item.json_data.left.bottom
  777. .data"
  778. v-bind:key="index_left_bottom"
  779. v-bind:class="{ l_b_margin: index_left_bottom % 2 == 0 }"
  780. @click="diyNavTo(item_left_bottom)"
  781. >
  782. <img v-bind:src="item_left_bottom.imgUrl" />
  783. </a>
  784. </div>
  785. </div>
  786. <div class="item right">
  787. <div class="title_wrap" @click="diyNavTo(item.json_data.center.title_info)">
  788. <a class="title" href="javascript:void(0)">{{
  789. item.json_data.center.title_info.title.initialValue
  790. }}</a>
  791. <span> 》</span>
  792. <a class="subtitle" href="javascript:void(0)">{{
  793. item.json_data.center.title_info.sub_title.initialValue
  794. }}</a>
  795. </div>
  796. <div class="img_top">
  797. <a
  798. href="javascript:void(0)"
  799. @click="diyNavTo(item.json_data.center.top.data[0])"
  800. >
  801. <img v-bind:src="item.json_data.center.top.data[0].imgUrl" />
  802. </a>
  803. </div>
  804. <div class="img_bottom">
  805. <a
  806. class="l_img"
  807. href="javascript:void(0)"
  808. v-for="(item_center_bottom, index_center_bottom) in item.json_data.center
  809. .bottom.data"
  810. v-bind:key="index_center_bottom"
  811. @click="diyNavTo(item_center_bottom)"
  812. >
  813. <img v-bind:src="item_center_bottom.imgUrl" />
  814. </a>
  815. </div>
  816. </div>
  817. <div class="item left clear_padding">
  818. <a
  819. class="l_img"
  820. href="javascript:void(0)"
  821. @click="diyNavTo(item.json_data.right.data[0])"
  822. >
  823. <img :src="item.json_data.right.data[0].imgUrl" />
  824. </a>
  825. </div>
  826. </div>
  827. </div>
  828. <!-- adv_13 end-->
  829. <!-- adv_19 start-->
  830. <div
  831. class="w_sld_react_1210 adv_19"
  832. v-if="item.json_data && item.json_data.type == 'adv_19'"
  833. :style="{
  834. paddingTop: item.json_data.padding_top + 'px',
  835. paddingBottom: item.json_data.padding_bottom + 'px',
  836. backgroundColor: item.json_data.bg_color,
  837. }"
  838. >
  839. <div class="adv_19_wrap">
  840. <div
  841. v-for="(items, index) in item.json_data.data"
  842. :key="index"
  843. class="item left"
  844. >
  845. <div
  846. class="top_title"
  847. :style="{ backgroundColor: items.top.title_info.title_bg_color }"
  848. >
  849. <div class="l_title" :style="{ color: items.top.title_info.title_color }">
  850. {{
  851. items.top.title_info.title_name
  852. ? items.top.title_info.title_name
  853. : "添加标题"
  854. }}
  855. </div>
  856. <div class="r_title">
  857. <ul>
  858. <li
  859. v-for="(val, key) in items.center.right"
  860. :key="key"
  861. :class="{ sel_tab: key == items.cur_tab }"
  862. @mouseover="adv19Tab(item.dataId, index, key, items)"
  863. >
  864. <span class="con">
  865. {{
  866. val.title_info.title_name ? val.title_info.title_name : "添加内容"
  867. }}
  868. </span>
  869. </li>
  870. </ul>
  871. </div>
  872. </div>
  873. <div class="center">
  874. <div class="l_center">
  875. <a href="javascript:;" @click="diyNavTo(items.center.left.data[0])">
  876. <img
  877. v-if="items.center.left.data[0].imgUrl"
  878. :src="items.center.left.data[0].imgUrl"
  879. />
  880. <span v-else>此处添加【186*340】图片</span>
  881. </a>
  882. </div>
  883. <div class="r_center">
  884. <div class="tabs_panel">
  885. <div
  886. v-for="(val, key) in items.center.right[items.cur_tab].data"
  887. :key="key"
  888. class="item"
  889. >
  890. <div class="title_wrap">
  891. <a class="main_title" href="javascript:;" @click="diyNavTo(val)">
  892. {{ val.main_title ? val.main_title : "图片标题" }}
  893. </a>
  894. <a class="sub_title" href="javascript:;" @click="diyNavTo(val)">
  895. {{ val.sub_title ? val.sub_title : "图片子标题" }}
  896. </a>
  897. </div>
  898. <div class="bottom_img">
  899. <a
  900. class="sld_com_no_img"
  901. href="javascript:;"
  902. @click="diyNavTo(val)"
  903. >
  904. <img v-if="val.imgUrl" :src="val.imgUrl" />
  905. <span v-else>此处添加【172*106】图片</span>
  906. </a>
  907. </div>
  908. </div>
  909. </div>
  910. </div>
  911. </div>
  912. <div class="bottom">
  913. <a
  914. v-for="(val, key) in items.bottom.data"
  915. :key="key"
  916. class="sld_com_no_img"
  917. href="javascript:;"
  918. @click="diyNavTo(val)"
  919. >
  920. <img v-if="val.imgUrl" :src="val.imgUrl" />
  921. <span v-else>此处添加【187*120】图片</span>
  922. </a>
  923. </div>
  924. </div>
  925. </div>
  926. </div>
  927. <!-- adv_19 end-->
  928. <!-- adv_20 start-->
  929. <div
  930. class="w_sld_react_1210 adv_20"
  931. v-if="item.json_data && item.json_data.type == 'adv_20'"
  932. :style="{
  933. paddingTop: item.json_data.padding_top + 'px',
  934. paddingBottom: item.json_data.padding_bottom + 'px',
  935. backgroundColor: item.json_data.bg_color,
  936. }"
  937. >
  938. <div class="adv_20_wrap flex_column_start_center">
  939. <div
  940. class="flex_row_around_center adv_20_wrap_row"
  941. v-for="(val, key) in item.json_data.data"
  942. :key="key"
  943. >
  944. <div
  945. v-for="(child, child_key) in val"
  946. :key="child_key"
  947. class="flex_column_center_center adv_20_wrap_item"
  948. >
  949. <div
  950. class="flex_row_center_center adv_20_wrap_item_img"
  951. style="border-radius: 0px"
  952. @click="diyNavTo(child)"
  953. >
  954. <img :src="child.imgUrl" />
  955. </div>
  956. <span class="main_title" @click="diyNavTo(child)">{{
  957. child.main_title
  958. }}</span>
  959. <span class="sub_title" @click="diyNavTo(child)">{{
  960. child.sub_title
  961. }}</span>
  962. </div>
  963. </div>
  964. </div>
  965. </div>
  966. <!-- adv_20 end-->
  967. <!-- adv_21 start-->
  968. <div
  969. class="w_sld_react_1210 adv_21"
  970. v-if="item.json_data && item.json_data.type == 'adv_21'"
  971. :style="{
  972. paddingTop: item.json_data.padding_top + 'px',
  973. paddingBottom: item.json_data.padding_bottom + 'px',
  974. backgroundColor: item.json_data.bg_color,
  975. }"
  976. >
  977. <div class="adv_21_wrap flex_row_start_start">
  978. <div
  979. class="flex_column_start_start adv_21_wrap_item"
  980. v-for="(val1, key1) in item.json_data.data"
  981. :key="key1"
  982. >
  983. <div
  984. class="flex_row_between_center title_part"
  985. @click="diyNavTo(val1.top_title)"
  986. >
  987. <span class="title">{{ val1.top_title.title.initialValue }}</span>
  988. <a class="view_more">{{ val1.top_title.sub_title.initialValue }}&gt;</a>
  989. </div>
  990. <div class="flex_column_start_start detail">
  991. <div
  992. class="flex_row_start_start item"
  993. v-for="(val2, key2) in val1.detail"
  994. :key="key2"
  995. >
  996. <div class="item_left" @click="diyNavTo(val2.left)">
  997. {{ val2.left.title.initialValue }}
  998. </div>
  999. <div class="flex_row_start_center item_right">
  1000. <span
  1001. class="item_right_con"
  1002. v-for="(val3, key3) in val2.right"
  1003. :key="key3"
  1004. @click="diyNavTo(val3)"
  1005. >
  1006. {{ val3.title.initialValue }}
  1007. </span>
  1008. </div>
  1009. </div>
  1010. </div>
  1011. </div>
  1012. </div>
  1013. </div>
  1014. <!-- adv_21 end-->
  1015. <!-- adv_27 start-->
  1016. <div
  1017. class="w_sld_react_1210 adv_27_wrap"
  1018. v-if="item.json_data && item.json_data.type == 'adv_27'"
  1019. :style="{
  1020. paddingTop: item.json_data.padding_top + 'px',
  1021. paddingBottom: item.json_data.padding_bottom + 'px',
  1022. backgroundColor: item.json_data.bg_color,
  1023. }"
  1024. >
  1025. <div class="floor_title">
  1026. <h2>
  1027. <font
  1028. v-bind:style="{ backgroundColor: item.json_data.title_info.title_color }"
  1029. >&nbsp;</font
  1030. >
  1031. <span v-bind:style="{ color: item.json_data.title_info.title_color }">{{
  1032. item.json_data.title_info.title_name
  1033. }}</span>
  1034. <font
  1035. v-bind:style="{ backgroundColor: item.json_data.title_info.title_color }"
  1036. >&nbsp;</font
  1037. >
  1038. </h2>
  1039. </div>
  1040. <div class="floor_goods">
  1041. <div
  1042. class="item"
  1043. v-for="(item_main, index_main) in item.json_data.data.store_data"
  1044. v-bind:key="index_main"
  1045. >
  1046. <router-link
  1047. target="_blank"
  1048. :to="'/store/'+ calcProductName(item_main.storeName) +'_'+ item_main.storeId"
  1049. >
  1050. <div class="wrap">
  1051. <div class="example_text">
  1052. <img v-bind:src="item_main.storeLogo" />
  1053. </div>
  1054. <p class="title">
  1055. <a :title="item_main.storeName">{{ item_main.storeName }}</a>
  1056. </p>
  1057. </div>
  1058. </router-link>
  1059. </div>
  1060. </div>
  1061. </div>
  1062. <!-- adv_27 end-->
  1063. <!-- adv_28 start-->
  1064. <div
  1065. class="w_sld_react_1210 adv_28_wrap"
  1066. v-if="item.json_data && item.json_data.type == 'adv_28'"
  1067. :style="{
  1068. paddingTop: item.json_data.padding_top + 'px',
  1069. paddingBottom: item.json_data.padding_bottom + 'px',
  1070. backgroundColor: item.json_data.bg_color,
  1071. }"
  1072. >
  1073. <div class="section-block industry-booth w_sld_react_1210 ">
  1074. <div class="industry-banner">
  1075. <a class="industry-link" href="javascript:void(0)">
  1076. <div class="industry-theme-image">
  1077. <img class="theme-img-big" v-bind:src="item.json_data.left.data.imgUrl" @click="diyNavTo(item.json_data.left.data)"/>
  1078. </div>
  1079. <div class="industry-theme-info">
  1080. <div class="industry-title">
  1081. {{item.json_data.title_info.title.initialValue}}
  1082. </div>
  1083. <div class="soure-now">
  1084. <span class="btn btn-main" v-if="item.json_data.title_info.link_type" @click="diyNavTo(item.json_data.title_info)">{{
  1085. item.json_data.title_info &&
  1086. item.json_data.title_info.sub_title.initialValue
  1087. }}</span>
  1088. </div>
  1089. </div>
  1090. </a>
  1091. </div>
  1092. <div class="industry-products">
  1093. <div class="prod-item" v-for="(item_center_bottom, index_center_bottom) in item.json_data
  1094. .center.data.goods_data" v-bind:key="index_center_bottom">
  1095. <div class="prod-inr" v-bind:title="item_center_bottom.goodsName" >
  1096. <router-link
  1097. target="_blank"
  1098. :to="'/goods/detail/'+ calcProductName(item_center_bottom.goodsName) +'_'+ item_center_bottom.productId"
  1099. >
  1100. <div class="prod-pic">
  1101. <div class="pic-inr">
  1102. <div class="img-wp">
  1103. <img
  1104. v-bind:src="item_center_bottom.mainImage"
  1105. v-bind:alt="item_center_bottom.goodsName"
  1106. />
  1107. <div class="gg"></div>
  1108. </div>
  1109. </div>
  1110. </div>
  1111. <div class="prod-txt">{{ item_center_bottom.goodsName }}</div>
  1112. </router-link>
  1113. </div>
  1114. </div>
  1115. </div>
  1116. </div>
  1117. </div>
  1118. <!-- adv_28 end-->
  1119. <!-- adv_29 start-->
  1120. <div
  1121. class="w_sld_react_1210 adv_29_wrap"
  1122. v-if="item.json_data && item.json_data.type == 'adv_29'"
  1123. :style="{
  1124. paddingTop: item.json_data.padding_top + 'px',
  1125. paddingBottom: item.json_data.padding_bottom + 'px',
  1126. backgroundColor: item.json_data.bg_color,
  1127. }"
  1128. >
  1129. <div class="section-block easy-sourcing w_sld_react_1210">
  1130. <div class="sourcing-bg">
  1131. <img
  1132. class="theme-img-small"
  1133. v-bind:src="item.json_data.left.data.imgUrl"
  1134. @click="diyNavTo(item.json_data.left.data)"
  1135. />
  1136. </div>
  1137. <div class="sourcing-centent">
  1138. <div class="sourcing-form">
  1139. <div class="form-title">{{L['想得到报价吗?']}}</div>
  1140. <HomeSourcingForm/>
  1141. </div>
  1142. <div class="sourcing-text">
  1143. <div class="sourcing-title" @click="diyNavTo(item.json_data.title_info)">{{item.json_data.title_info.title.initialValue}}</div>
  1144. <div class="sourcing-desc" style="margin-bottom: 24px" @click="diyNavTo(item.json_data.title_info)">
  1145. <p>{{item.json_data.title_info.sub_title.initialValue}}</p>
  1146. </div>
  1147. <div class="sourcing-desc" v-for="(item_center, index_center) in item.json_data.center" v-bind:key="index_center" >
  1148. <p @click="diyNavTo(item_center)">
  1149. {{ item_center.title.initialValue }}
  1150. </p>
  1151. </div>
  1152. <div class="sourcing-more">
  1153. <a href="javascript:void(0)" @click="diyNavTo(item.json_data.btn)">
  1154. {{item.json_data.btn.title.initialValue}}<i class="ob-icon icon-right"> ></i>
  1155. </a>
  1156. </div>
  1157. </div>
  1158. </div>
  1159. </div>
  1160. </div>
  1161. <!-- adv_29 end-->
  1162. </div>
  1163. </div>
  1164. </template>
  1165. <script setup>
  1166. import {
  1167. ElCarousel,
  1168. ElCarouselItem,
  1169. } from "element-plus";
  1170. import { useFiltersStore } from "@/store/filter.js";
  1171. import { getCurLanguage } from '@/composables/common.js';
  1172. const L = getCurLanguage();
  1173. const router = useRouter()
  1174. const route = useRoute();
  1175. const props = defineProps({
  1176. decorateData: Object, //装修的数据
  1177. source: String, //来源,home:平台首页 store:店铺装修
  1178. });
  1179. const filtersStore = useFiltersStore();
  1180. //退出登录
  1181. const loginOut = async () => {
  1182. filtersStore.setMemberInfo({});
  1183. filtersStore.setLoginStatus(false);
  1184. filtersStore.setToken("");
  1185. filtersStore.setRefreshToken("");
  1186. filtersStore.setTime(new Date().getTime().toString()); //存储refresh_token更新时间
  1187. window.location.reload();
  1188. };
  1189. const goSupplierUrl = () => {
  1190. let url = supplierUrl;
  1191. window.open(url, '_blank');
  1192. };
  1193. const gotoFun = (val) => {
  1194. // console.log(val)
  1195. // return
  1196. if (val.link_type == "url") {
  1197. //跳转链接地址
  1198. if (val.link_value) {
  1199. val.link_value = quillEscapeToHtml(val.link_value);
  1200. }
  1201. window.open(val.link_value, "_blank");
  1202. } else if (val.link_type == "goods") {
  1203. //跳转商品详情页
  1204. // let routeUrl = router.resolve({
  1205. // path: "/goods/detail",
  1206. // query: {
  1207. // productId: val.info.defaultProductId,
  1208. // },
  1209. // });
  1210. let href = "/goods/detail/"+ calcProductName(val.info.goodsName) +'_'+ val.info.defaultProductId
  1211. window.open(href, "_blank");
  1212. } else if (val.link_type == "category") {
  1213. // 分类列表
  1214. // let routeUrl = router.resolve({
  1215. // path: "/goods/list/categoryId-"+val.info.categoryId,
  1216. // });
  1217. let href = '/goods/list/'+ calcProductName(val.info.categoryName) +'_v-'+ val.info.categoryId + '_gid-' + val.info.grade + '_pid-' + val.info.pid
  1218. window.open(href, "_blank");
  1219. } else if (val.link_type == "keyword") {
  1220. // 关键词
  1221. let path = "/goods/list/search_keyword-"+ val.link_value
  1222. let query = {
  1223. keyword: val.link_value,
  1224. };
  1225. if (val.storeId) {
  1226. query.storeId = val.storeId;
  1227. path+='/storeId-'+val.storeId
  1228. }
  1229. let routeUrl = router.resolve({
  1230. path: path
  1231. });
  1232. window.open(routeUrl.href, "_blank");
  1233. } else if (val.link_type == "topic") {
  1234. //跳转专题页
  1235. let routeUrl = router.push({
  1236. path: "/home/topic",
  1237. query: {
  1238. topicId: val.info.decoId,
  1239. },
  1240. });
  1241. window.open(routeUrl.href, "_blank");
  1242. } else if (val.link_type == "brand_home") {
  1243. //品牌列表
  1244. let routeUrl = router.resolve({
  1245. path: "/brand",
  1246. query: {},
  1247. });
  1248. window.open(routeUrl.href, "_blank");
  1249. } else if (val.link_type == "store_list") {
  1250. //店铺列表
  1251. let routeUrl = router.resolve({
  1252. path: "/store/list/current-1",
  1253. });
  1254. window.open(routeUrl.href, "_blank");
  1255. } else if (val.link_type == "voucher_center") {
  1256. //领券中心
  1257. let routeUrl = router.resolve({
  1258. path: "/coupon",
  1259. });
  1260. window.open(routeUrl.href, "_blank");
  1261. } else if (val.link_type == "point_center") {
  1262. let routeUrl = router.resolve({
  1263. path: "/point/index",
  1264. });
  1265. window.open(routeUrl.href, "_blank");
  1266. }
  1267. }
  1268. const goGoodsListByCatIdFun = (categoryId,name) => {
  1269. let routeUrl = router.resolve({
  1270. path: "/goods/list/_"+ calcProductName(name) +"_v-"+categoryId,
  1271. });
  1272. window.open(routeUrl.href, '_blank');
  1273. }
  1274. function goGoodsDetailFun(availableProductId,goodsName) {
  1275. // let routeUrl = router.resolve({
  1276. // path: "/goods/detail/",
  1277. // query: { productId: availableProductId }
  1278. // });
  1279. let href = "/goods/detail/" + calcProductName(goodsName) + '_' + availableProductId
  1280. window.open(href, '_blank');
  1281. }
  1282. function goStoreDetailFun(availableStoreId,availableStoreName) {
  1283. // let routeUrl = router.resolve({
  1284. // path: "/store",
  1285. // query: { vid: availableStoreId }
  1286. // });
  1287. let href = "/store/" + calcProductName(availableStoreName) + '_' + availableStoreId
  1288. window.open(href, '_blank');
  1289. }
  1290. const diyNavTo = (val) => {
  1291. if (route.query.vid) {
  1292. val.storeId = route.query.vid;
  1293. }
  1294. gotoFun(val);
  1295. };
  1296. const goGoodsDetail = (val) => {
  1297. goGoodsDetailFun(val.productId,val.goodsName);
  1298. };
  1299. const goStoreDetail = (val) => {
  1300. goStoreDetailFun(val.storeId,val.storeName);
  1301. };
  1302. const goGoodsListByCatId = (val,name) => {
  1303. goGoodsListByCatIdFun(val,name);
  1304. };
  1305. //adv_19楼层tab切换事件
  1306. const adv19Tab = (dataId, index, key, items) => {
  1307. items.cur_tab = key;
  1308. };
  1309. </script>
  1310. <style lang="scss" scoped>
  1311. @import "@/assets/style/decorate.scss";
  1312. @import "@/assets/style/theme.scss";
  1313. .sld_diy {
  1314. .el-carousel {
  1315. width: 100%;
  1316. margin: 0 auto;
  1317. }
  1318. background: #f1f1f1;
  1319. .el-carousel__item {
  1320. display: flex;
  1321. justify-content: center;
  1322. align-items: center;
  1323. div {
  1324. background-position: center center;
  1325. width: 1920px;
  1326. height: 457px;
  1327. position: absolute;
  1328. left: 50%;
  1329. top: 0;
  1330. margin-left: -960px;
  1331. background-repeat: no-repeat;
  1332. background-size: contain;
  1333. }
  1334. }
  1335. .main_banner {
  1336. width: 100%;
  1337. height: 457px;
  1338. position: relative;
  1339. overflow: hidden;
  1340. margin: 0 auto;
  1341. .nav-menu {
  1342. position: absolute;
  1343. left: 50%;
  1344. margin-left: -600px;
  1345. top: -3px;
  1346. width: 187px;
  1347. height: 457px;
  1348. z-index: 9;
  1349. background-color: rgba(0, 0, 0, 0.6);
  1350. -webkit-box-sizing: border-box;
  1351. box-sizing: border-box;
  1352. .menu-wrap {
  1353. .menu-item {
  1354. height: 39px;
  1355. line-height: 39px;
  1356. margin: 5px 0;
  1357. position: relative;
  1358. .first_cat {
  1359. width: 125px;
  1360. display: block;
  1361. font-size: 16px;
  1362. color: #ffffff;
  1363. padding-left: 30px;
  1364. text-overflow: ellipsis;
  1365. overflow: hidden;
  1366. position: relative;
  1367. .nav-menu {
  1368. position: absolute;
  1369. left: 50%;
  1370. margin-left: -600px;
  1371. top: -3px;
  1372. width: 187px;
  1373. height: 457px;
  1374. z-index: 9;
  1375. background-color: rgba(0, 0, 0, 0.6);
  1376. -webkit-box-sizing: border-box;
  1377. box-sizing: border-box;
  1378. .menu-wrap {
  1379. .menu-item {
  1380. height: 39px;
  1381. line-height: 39px;
  1382. margin: 5px 0;
  1383. .first_cat {
  1384. width: 125px;
  1385. display: block;
  1386. font-size: 16px;
  1387. color: #ffffff;
  1388. padding-left: 30px;
  1389. text-overflow: ellipsis;
  1390. overflow: hidden;
  1391. white-space: nowrap;
  1392. position: relative;
  1393. &:after {
  1394. position: absolute;
  1395. right: 0px;
  1396. top: 12.5px;
  1397. content: " ";
  1398. width: 7px !important;
  1399. height: 14px !important;
  1400. }
  1401. }
  1402. &:hover {
  1403. background-color: $colorMain;
  1404. .children {
  1405. display: inline-block;
  1406. }
  1407. }
  1408. .children {
  1409. display: none;
  1410. width: 1013px;
  1411. height: 417px;
  1412. background-color: #fff;
  1413. position: absolute;
  1414. top: 0;
  1415. left: 187px;
  1416. padding: 20px 0;
  1417. .fore-dl {
  1418. width: 100%;
  1419. clear: both;
  1420. overflow: hidden;
  1421. }
  1422. dt {
  1423. position: relative;
  1424. float: left;
  1425. width: 152px;
  1426. padding: 8px 30px 0 0;
  1427. text-align: right;
  1428. font-weight: 700;
  1429. line-height: 2em;
  1430. overflow: hidden;
  1431. white-space: nowrap;
  1432. i {
  1433. position: absolute;
  1434. top: 11px;
  1435. right: 18px;
  1436. width: 4px;
  1437. height: 14px;
  1438. font: 400 9px/14px consolas;
  1439. }
  1440. .second {
  1441. color: #333;
  1442. font-size: 14px;
  1443. width: 140px;
  1444. overflow: hidden;
  1445. display: inline-block;
  1446. line-height: 18px;
  1447. text-overflow: ellipsis;
  1448. }
  1449. }
  1450. dd {
  1451. border-top: none;
  1452. border-bottom: 1px dashed #dddddd;
  1453. width: 790px;
  1454. padding: 6px 0;
  1455. float: left;
  1456. line-height: 16px;
  1457. margin-left: 15px;
  1458. }
  1459. .third {
  1460. float: left;
  1461. padding: 0 8px;
  1462. margin: 4px 0;
  1463. line-height: 16px;
  1464. height: 16px;
  1465. border-right: 1px solid #e0e0e0;
  1466. white-space: nowrap;
  1467. color: #999;
  1468. font-size: 13px;
  1469. }
  1470. .children_item {
  1471. display: flex;
  1472. flex-direction: row;
  1473. justify-content: flex-start;
  1474. align-items: flex-start;
  1475. flex-wrap: wrap;
  1476. height: 30px;
  1477. .li_wrap {
  1478. height: 30px;
  1479. line-height: 30px;
  1480. flex: 1;
  1481. padding-left: 23px;
  1482. a {
  1483. line-height: 30px;
  1484. height: 30px;
  1485. color: #999999;
  1486. }
  1487. }
  1488. a {
  1489. color: $colorMain;
  1490. font-size: 14px;
  1491. }
  1492. img {
  1493. width: 42px;
  1494. height: 35px;
  1495. vertical-align: middle;
  1496. margin-right: 15px;
  1497. }
  1498. }
  1499. }
  1500. }
  1501. }
  1502. }
  1503. }
  1504. &:hover {
  1505. background-color: $colorMain;
  1506. .children {
  1507. display: inline-block;
  1508. }
  1509. }
  1510. .children {
  1511. display: none;
  1512. width: 1013px;
  1513. height: 417px;
  1514. background-color: #fff;
  1515. position: absolute;
  1516. top: 0;
  1517. left: 187px;
  1518. padding: 20px 0;
  1519. .fore-dl {
  1520. width: 100%;
  1521. clear: both;
  1522. overflow: hidden;
  1523. }
  1524. dt {
  1525. position: relative;
  1526. float: left;
  1527. width: 152px;
  1528. padding: 8px 30px 0 0;
  1529. text-align: right;
  1530. font-weight: 700;
  1531. line-height: 2em;
  1532. overflow: hidden;
  1533. white-space: nowrap;
  1534. i {
  1535. position: absolute;
  1536. top: 11px;
  1537. right: 18px;
  1538. width: 4px;
  1539. height: 14px;
  1540. font: 400 9px/14px consolas;
  1541. }
  1542. .second {
  1543. color: #333;
  1544. font-size: 14px;
  1545. width: 140px;
  1546. overflow: hidden;
  1547. display: inline-block;
  1548. line-height: 18px;
  1549. text-overflow: ellipsis;
  1550. }
  1551. }
  1552. dd {
  1553. border-top: none;
  1554. border-bottom: 1px dashed #dddddd;
  1555. width: 790px;
  1556. padding: 6px 0;
  1557. float: left;
  1558. line-height: 16px;
  1559. margin-left: 15px;
  1560. }
  1561. .third {
  1562. float: left;
  1563. padding: 0 8px;
  1564. margin: 4px 0;
  1565. line-height: 16px;
  1566. height: 16px;
  1567. border-right: 1px solid #e0e0e0;
  1568. white-space: nowrap;
  1569. color: #999;
  1570. font-size: 13px;
  1571. }
  1572. .children_item {
  1573. display: flex;
  1574. flex-direction: row;
  1575. justify-content: flex-start;
  1576. align-items: flex-start;
  1577. flex-wrap: wrap;
  1578. height: 30px;
  1579. .li_wrap {
  1580. height: 30px;
  1581. line-height: 30px;
  1582. flex: 1;
  1583. padding-left: 23px;
  1584. a {
  1585. line-height: 30px;
  1586. height: 30px;
  1587. color: #999999;
  1588. }
  1589. }
  1590. a {
  1591. color: $colorMain;
  1592. font-size: 14px;
  1593. }
  1594. img {
  1595. width: 42px;
  1596. height: 35px;
  1597. vertical-align: middle;
  1598. margin-right: 15px;
  1599. }
  1600. }
  1601. }
  1602. }
  1603. }
  1604. }
  1605. .swiper-container {
  1606. width: 100%;
  1607. height: 100%;
  1608. position: absolute;
  1609. .swiper-slide {
  1610. a {
  1611. display: inline-block;
  1612. width: 100%;
  1613. height: 100%;
  1614. img {
  1615. width: 1920px;
  1616. height: 100%;
  1617. margin-left: -960px;
  1618. left: 50%;
  1619. position: relative;
  1620. overflow: hidden;
  1621. }
  1622. }
  1623. }
  1624. }
  1625. }
  1626. .main_diy {
  1627. margin-top: 10px;
  1628. }
  1629. .product-box {
  1630. background-color: $colorJ;
  1631. padding: 30px 0 50px;
  1632. h2 {
  1633. font-size: $fontF;
  1634. height: 21px;
  1635. line-height: 21px;
  1636. color: $colorMain;
  1637. margin-bottom: 20px;
  1638. }
  1639. .wrapper {
  1640. display: flex;
  1641. .banner-left {
  1642. margin-right: 16px;
  1643. img {
  1644. width: 224px;
  1645. height: 619px;
  1646. }
  1647. }
  1648. .list-box {
  1649. .list {
  1650. @include flex();
  1651. width: 986px;
  1652. margin-bottom: 14px;
  1653. &:last-child {
  1654. margin-bottom: 0;
  1655. }
  1656. .item {
  1657. width: 236px;
  1658. height: 302px;
  1659. background-color: $colorG;
  1660. text-align: center;
  1661. span {
  1662. display: inline-block;
  1663. width: 67px;
  1664. height: 24px;
  1665. font-size: 14px;
  1666. line-height: 24px;
  1667. color: $colorG;
  1668. &.new-pro {
  1669. background-color: #7ecf68;
  1670. }
  1671. &.kill-pro {
  1672. background-color: #e82626;
  1673. }
  1674. }
  1675. .item-img {
  1676. img {
  1677. width: 100%;
  1678. height: 195px;
  1679. }
  1680. }
  1681. .item-info {
  1682. h3 {
  1683. font-size: 14px;
  1684. color: $colorMain;
  1685. line-height: 14px;
  1686. font-weight: bold;
  1687. }
  1688. p {
  1689. color: $colorD;
  1690. line-height: 13px;
  1691. margin: 6px auto 13px;
  1692. }
  1693. .price {
  1694. color: #f20a0a;
  1695. font-size: 14px;
  1696. font-weight: bold;
  1697. cursor: pointer;
  1698. &:after {
  1699. // @include bgImg(22px, 22px, "/imgs/icon-cart-hover.png");
  1700. content: " ";
  1701. margin-left: 5px;
  1702. vertical-align: middle;
  1703. }
  1704. }
  1705. }
  1706. }
  1707. }
  1708. }
  1709. }
  1710. }
  1711. }
  1712. </style>