HotNews.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <template>
  2. <!-- 点击排行 -->
  3. <div class="categ_3_index clearfix">
  4. <div class="shop_name_box">
  5. <div class="shop_name">
  6. <span class="shop_name_box_a">点击排行</span>
  7. </div>
  8. <div class="shop_name_right"></div>
  9. </div>
  10. <div class="categ_ul_img_1">
  11. <div class="categ_li_img_1" v-for="item in pageData1">
  12. <NuxtLink
  13. :to="getShopPathDetail1(item)"
  14. class="categ_li_img_1_a"
  15. :title="item.name"
  16. >
  17. <img class="categ_li_img_1_img" :src="item.imgurl" alt="item.name">
  18. <div class="categ_li_img_1_dot2 dot2">
  19. {{ item.name }}
  20. </div>
  21. </NuxtLink>
  22. </div>
  23. </div>
  24. </div>
  25. <!-- 点击排行 -->
  26. <!-- 最新商机 -->
  27. <div class="categ_5_index clearfix">
  28. <div class="shop_name_box">
  29. <div class="shop_name">
  30. <span class="shop_name_box_a">最新商机</span>
  31. </div>
  32. <div class="shop_name_right"></div>
  33. </div>
  34. <div class="categ_ul_img_2">
  35. <div class="categ_li_img_2" v-for="item in pageData2">
  36. <NuxtLink
  37. :to="getShopPathDetail1(item)"
  38. class="categ_li_img_2_a"
  39. :title="item.name"
  40. >
  41. <img class="categ_li_img_2_img" :src="item.imgurl" alt="item.name">
  42. <div class="categ_li_img_2_dot2 dot2">
  43. {{ item.name }}
  44. </div>
  45. </NuxtLink>
  46. </div>
  47. </div>
  48. </div>
  49. </template>
  50. <script setup>
  51. //1.获得模块数据 start ---------------------------------------->
  52. const pageData1 = ref([])//点击排行
  53. const pageData2 = ref([])//最新商机
  54. //创建请求数据json
  55. let getJson = [
  56. {"level":"3,0,6"},//点击排行
  57. {"level":"4,0,6"},//最新商机
  58. ]
  59. let jsonString = JSON.stringify(getJson)
  60. //获取所有数据
  61. async function getPageAllData() {
  62. const mkdata = await requestDataPromise('/web/getWebsiteshop', {
  63. method: 'GET',
  64. query: {
  65. 'catid': 346,
  66. 'id': jsonString,
  67. },
  68. });
  69. if (mkdata.code == 200) {
  70. //最新数据2
  71. pageData1.value = mkdata.data.goods[0];
  72. //供应商品
  73. pageData2.value = mkdata.data.goods[1];
  74. } else {
  75. ElMessage.error(mkdata.message)
  76. }
  77. }
  78. getPageAllData();
  79. </script>
  80. <style lang="less" scoped>
  81. .dot2 {
  82. overflow: hidden;
  83. display: -webkit-box;
  84. -webkit-box-orient: vertical;
  85. -webkit-line-clamp: 2;
  86. }
  87. .categ_3_index {
  88. margin-top: 28px;
  89. }
  90. .clearfix {
  91. overflow: hidden;
  92. }
  93. .shop_name {
  94. float: left;
  95. height: 44px;
  96. line-height: 44px;
  97. color: #fff;
  98. font-weight: bold;
  99. position: relative;
  100. z-index: 11;
  101. text-align: center;
  102. font-size: 20px;
  103. background: #A01C0E;
  104. padding: 0px 14px;
  105. }
  106. .shop_name_box {
  107. border-top: solid 1px #fff;
  108. }
  109. .shop_name_box_a {
  110. height: 44px;
  111. line-height: 44px;
  112. color: #fff;
  113. font-weight: bold;
  114. font-size: 20px;
  115. }
  116. .shop_name_right {
  117. height: 40px;
  118. border-bottom: 1px solid #E8E9EC;
  119. margin-top: 4px;
  120. background: #F8F8F8;
  121. position: relative;
  122. z-index: 2;
  123. }
  124. .categ_li_img_1 {
  125. float: left;
  126. margin: 0px 24px 20px 0px;
  127. width: 180px;
  128. position: relative;
  129. }
  130. .categ_li_img_1_a {}
  131. .categ_li_img_1_img {
  132. display: block;
  133. width: 180px;
  134. height: 180px;
  135. }
  136. .categ_li_img_1_dot2 {
  137. width: 168px;
  138. margin: 10px auto 0px;
  139. height: 32px;
  140. line-height: 16px;
  141. color: #333;
  142. font-size: 14px;
  143. }
  144. .categ_li_img_1:nth-of-type(6n) {
  145. margin-right: 0px;
  146. }
  147. .categ_li_img_1_hover_dot1 {
  148. width: 152px;
  149. position: absolute;
  150. left: 50%;
  151. margin-left: -76px;
  152. bottom: 13px;
  153. font-size: 14px;
  154. background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
  155. -webkit-background-clip: text;
  156. color: transparent;
  157. }
  158. .categ_li_img_1:hover .categ_li_img_1_dot2 {
  159. color: #A01C0E;
  160. }
  161. .categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
  162. content: '';
  163. display: block;
  164. position: absolute;
  165. background: url(@/public/img/18.png) no-repeat left 0px;
  166. background-size: 100% 100%;
  167. width: 32px;
  168. height: 32px;
  169. left: 10px;
  170. top: 0px;
  171. z-index: 11;
  172. }
  173. .categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
  174. content: '';
  175. display: block;
  176. position: absolute;
  177. background: url(@/public/img/19.png) no-repeat left 0px;
  178. background-size: 100% 100%;
  179. width: 32px;
  180. height: 32px;
  181. left: 10px;
  182. top: 0px;
  183. z-index: 11;
  184. }
  185. .categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
  186. content: '';
  187. display: block;
  188. position: absolute;
  189. background: url(@/public/img/20.png) no-repeat left 0px;
  190. background-size: 100% 100%;
  191. width: 32px;
  192. height: 32px;
  193. left: 10px;
  194. top: 0px;
  195. z-index: 11;
  196. }
  197. .categ_ul_img_1 {
  198. margin-top: 20px;
  199. }
  200. .categ_ul_img_2 {
  201. margin-top: 20px;
  202. }
  203. .categ_li_img_2 {
  204. float: left;
  205. margin: 0px 24px 20px 0px;
  206. width: 180px;
  207. position: relative;
  208. }
  209. .categ_li_img_2_a {}
  210. .categ_li_img_2_img {
  211. display: block;
  212. width: 180px;
  213. height: 180px;
  214. }
  215. .categ_li_img_2_dot2 {
  216. width: 168px;
  217. margin: 10px auto 0px;
  218. height: 32px;
  219. line-height: 16px;
  220. color: #333;
  221. font-size: 14px;
  222. }
  223. .categ_li_img_2:nth-of-type(6n) {
  224. margin-right: 0px;
  225. }
  226. .categ_li_img_2_hover_dot1 {
  227. width: 152px;
  228. position: absolute;
  229. left: 50%;
  230. margin-left: -76px;
  231. bottom: 13px;
  232. font-size: 14px;
  233. background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
  234. -webkit-background-clip: text;
  235. color: transparent;
  236. }
  237. .categ_li_img_2:hover .categ_li_img_2_dot2 {
  238. color: #A01C0E;
  239. }
  240. </style>