m_user.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756
  1. <template>
  2. <div class="bg-[#fafafa]">
  3. <div class="flex mx-[20px] h-[44px] items-center">
  4. <div class="w-[24px]" v-if="!active" @click="active = true">
  5. <img src="~/public/image/title-left.png" style="width: 24px;" alt="">
  6. </div>
  7. <div class="w-[24px]" v-else @click="active = false">
  8. <img src="~/public/image/title-left-x.png" style="width: 24px;" alt="">
  9. </div>
  10. <div class="flex-1 flex items-center justify-center">
  11. <img src="~/public/favicon.ico" style="width: 24px;" alt="">
  12. </div>
  13. <div class="w-[24px]">
  14. <a href="tel:17723267692">
  15. <img src="~/public/image/title-right.png" style="width: 24px;" alt="">
  16. </a>
  17. </div>
  18. </div>
  19. <!-- 图片 -->
  20. <div>
  21. <div class="relatives flex justify-center">
  22. <div class="flex-[1]">
  23. </div>
  24. <!-- <img src="~/public/image/img_home.png" class="w-full" alt=""> -->
  25. <div class=" flex items-center flex-col text-[#fff] mt-[28px]">
  26. <div class="text-[24px] font-medium flex">
  27. <h1 class="pr-[15px]">惠融易客</h1>
  28. <div>
  29. 数字金融服务商
  30. </div>
  31. </div>
  32. <span class="mt-[10px] text-[12px]">提交申请,立即开启企业数字化升级
  33. </span>
  34. <span class="mb-[28px] text-[12px]">
  35. 提供专家1V1服务,提供企业定制化数字解决方案
  36. </span>
  37. <n-button type="info" class="bg-[#165DFF] w-[144px] h-[40px] text-[14px] rounded-[4px]" @click="btn">
  38. 立即申请试用
  39. </n-button>
  40. </div>
  41. <div class="flex-[1]">
  42. </div>
  43. </div>
  44. </div>
  45. <!-- 传统问题 traditional-->
  46. <div class="flex flex-col items-center justify-center mx-[16px] mt-[30px] mb-[30px]">
  47. <h2 class="text-[18px] font-medium">传统方式管理难点</h2>
  48. <span class="text-[#999999] pb-[20px] text-[12px]">传统方式管理过程中有哪些问题?</span>
  49. <div class="flex">
  50. <div class="w-765px mx-auto">
  51. <n-carousel autoplay class="mx-auto" :current-index="traditionalIndex" :draggable="true">
  52. <img src="~/public/image/m_img_home_qs_0_0.png" style="width: 343px; margin: 0 auto;" alt="">
  53. <img src="~/public/image/m_img_home_qs_0_1.png" style="width: 343px; margin: 0 auto;" alt="">
  54. <img src="~/public/image/m_img_home_qs_0_2.png" style="width: 343px; margin: 0 auto;" alt="">
  55. </n-carousel>
  56. <div class="h-[10px]"></div>
  57. <ul class="custom-dots">
  58. <li v-for="(i, index) in 3" :key="index" :class="{ ['is-active']: traditionalIndex === index }"
  59. @click="traditionalIndexFn(index)">
  60. </li>
  61. </ul>
  62. </div>
  63. </div>
  64. </div>
  65. <div class="flex flex-col items-center justify-center py-[30px] advantage text-[#fff]">
  66. <h2 class="text-[18px] font-medium">我们的优势</h2>
  67. <span class="pt-[5px] pb-[10px] text-[12px]">与传统方式相比较,惠融易客的优势又有哪些?</span>
  68. <div class="flex">
  69. <!-- <div></div> -->
  70. <ul class="flex flex-col items-center justify-between">
  71. <li class="w-[343px] h-[175px] mt-[10px]">
  72. <img src="~/public/image/m_advant-01.png" alt="">
  73. </li>
  74. <li class="w-[343px] h-[175px] my-[20px]">
  75. <img src="~/public/image/m_advant-02.png" alt="">
  76. </li>
  77. <li class="w-[343px] h-[175px]">
  78. <img src="~/public/image/m_advant-03.png" alt="">
  79. </li>
  80. </ul>
  81. <!-- <div></div> -->
  82. </div>
  83. <!-- <img src="~/public/image/m_advantage.png" class="w-full" alt=""> -->
  84. </div>
  85. <!-- 精准获客 -->
  86. <div id="solution" class="flex flex-col items-center justify-center py-[30px]">
  87. <h2 class="text-[18px] font-medium">精准获客</h2>
  88. <span class="text-[#999999] pt-[5px] pb-[10px] text-[12px]">多渠道投放对接,帮助企业精准推广产品矩阵</span>
  89. <div class="flex flex-col">
  90. <div></div>
  91. <div class="flex w-[375px]">
  92. <ul class=" flex items-center flex-wrap justify-center mx-auto">
  93. <li class="w-[166px] mb-[10px] mr-[5px]">
  94. <img src="~/public/image/m_img_home_ad_0.png" class="w-[166px]" alt="">
  95. </li>
  96. <li class="w-[166px] mb-[10px] ml-[5px]">
  97. <img src="~/public/image/m_img_home_ad_1.png" class="w-[166px]" alt="">
  98. </li>
  99. <li class="w-[166px] mb-[10px] mr-[5px]">
  100. <img src="~/public/image/m_img_home_ad_2.png" class="w-[166px]" alt="">
  101. </li>
  102. <li class="w-[166px] mb-[10px] ml-[5px]">
  103. <img src="~/public/image/m_img_home_ad_3.png" class="w-[166px]" alt="">
  104. </li>
  105. <li class="w-[166px] mb-[10px] mr-[5px]">
  106. <img src="~/public/image/m_img_home_ad_4.png" class="w-[166px]" alt="">
  107. </li>
  108. <li class="w-[166px] mb-[10px] ml-[5px]">
  109. <img src="~/public/image/m_img_home_ad_5.png" class="w-[166px]" alt="">
  110. </li>
  111. <li class="w-[166px] mb-[10px] mr-[5px]">
  112. <img src="~/public/image/m_img_home_ad_6.png" class="w-[166px]" alt="">
  113. </li>
  114. <li class="w-[166px] mb-[10px] ml-[5px]">
  115. <img src="~/public/image/m_img_home_ad_7.png" class="w-[166px]" alt="">
  116. </li>
  117. </ul>
  118. </div>
  119. <div>
  120. </div>
  121. </div>
  122. </div>
  123. <!-- 免费试用 trial-->
  124. <div class="w-full h-full trial">
  125. <div></div>
  126. <div class=" mx-auto flex flex-col items-center text-[#161616] pt-[16px] pb-[20px]">
  127. <h2 class="font-medium text-[18px]" @click="btn">免费试用</h2>
  128. <div class="mt-[12px] mb-[10px] text-[12px] text-[#999999]">
  129. 立即免费试用惠融易客CRM 提升企业业绩
  130. </div>
  131. <div class="mb-[10px] flex items-center font-medium text-[16px]">
  132. <span>已有</span>
  133. <ul class="flex justify-center items-center mx-[10px] my-[20px]">
  134. <li v-for="item in freeList"
  135. class="w-[22px] h-[26px] text-center px-[3px] bg-[#fff] mx-[2px] text-[16px] rounded-[2px]">
  136. {{ item }}
  137. </li>
  138. </ul>
  139. <span>
  140. 人加入
  141. </span>
  142. </div>
  143. <n-button type="info" class="bg-[#165DFF] w-[144px] h-[40px] text-[14px]" @click="btn">
  144. 立即申请试用
  145. </n-button>
  146. </div>
  147. <div>
  148. </div>
  149. </div>
  150. <!-- 咨询信息 message-->
  151. <div class="flex flex-col items-center justify-center pt-[30px] pb-[30px] mx-[16px] " v-if="homeList[0]">
  152. <h2 class="text-[18px] font-medium">资讯信息</h2>
  153. <span class="text-[#999999] px-[12px] pt-[5px] pb-[8px] text-[12px]">点击了解惠融易客的更多信息</span>
  154. <div>
  155. <n-carousel autoplay :currentIndex="currentIndex" class="mx-auto ">
  156. <img v-for="item in homeList" class="carousel-img rounded-[4px]" :src="item.images">
  157. </n-carousel>
  158. <div
  159. class="flex flex-col justify-between font-medium text-[16px] h-[94px] w-[343px] mx-auto text-[#000000] mt-[10px] mb-[20px]">
  160. <h1>{{ homeList[currentIndex].title }}</h1>
  161. <div class="flex items-center justify-between">
  162. <span class="text-[12px] text1 text-[#999999]">
  163. {{ homeList[currentIndex].summary }}
  164. </span>
  165. <n-button type="info" class="bg-[#165DFF]" @click="btnContent(currentIndex)">
  166. 查看详情
  167. </n-button>
  168. </div>
  169. </div>
  170. <ul class="custom-dots w-[750px]">
  171. <li v-for="(i, index) in homeList" :key="index" :class="{ ['is-active']: currentIndex === index }"
  172. @click="customFn(index)">
  173. </li>
  174. </ul>
  175. </div>
  176. </div>
  177. <div class="w-full bg-[#131820] pt-[20px] pb-[10px] pl-[16px]" id="contact">
  178. <n-collapse>
  179. <n-collapse-item title="联系方式" name="1">
  180. <div class="flex flex-col text-[#999]">
  181. <span class="text-[12px] my-[16px]">
  182. 客服: kefu@meloinfo.com
  183. </span>
  184. <span class="text-[12px]">
  185. <span>商务:</span>
  186. <a href="tel:17723267692" class="text-[#3061f6]"> 17723267692(微信同号)</a>
  187. </span>
  188. </div>
  189. </n-collapse-item>
  190. <n-collapse-item title="公司地址" name="2">
  191. <span class="text-[12px] py-[10px] text-[#999]">
  192. 重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
  193. </span>
  194. </n-collapse-item>
  195. <n-collapse-item class="ncollapse" title="应用二维码(长按识别)" name="3">
  196. <!-- 二维码 -->
  197. <div class="flex items-center justify-center mr-[16px]">
  198. <div class="flex flex-col items-center justify-center" v-if="bottomCode.wxQrUrl">
  199. <img :src="bottomCode.wxQrUrl" style="width:100px;height:100px" alt="">
  200. <span class="text-[#999] text-[12px] mt-[10px]" style="font-size: 11px; margin-bottom: 5px;">
  201. 关注公众号
  202. </span>
  203. </div>
  204. <div class="flex flex-col items-center justify-center" v-if="bottomCode.iosQrUrl" style="margin: 0 10px">
  205. <img :src="bottomCode.iosQrUrl" style="width:100px;height:100px" alt="">
  206. <span class="text-[#999] text-[12px] mt-[10px]" style="font-size: 11px; margin-bottom: 5px;">
  207. iosAPP下载
  208. </span>
  209. </div>
  210. <div class="flex flex-col items-center justify-center" v-if="bottomCode.androidQrUrl">
  211. <img :src="bottomCode.androidQrUrl" style="width:100px;height:100px" alt="">
  212. <span class="text-[#999] text-[12px] mt-[10px]" style="font-size: 11px; margin-bottom: 5px;">
  213. 安卓APP下载
  214. </span>
  215. </div>
  216. </div>
  217. </n-collapse-item>
  218. </n-collapse>
  219. <n-divider />
  220. <div class=" m-auto mt-[30px]">
  221. <!-- 备案号 -->
  222. <div class="flex flex-col items-center justify-center text-[#52575E] text-[10px] my-[20px]">
  223. <span>Copyright © 2023 重庆惠融数字科技有限公司版权所有</span>
  224. <span>
  225. 渝ICP备2023000211号-4
  226. </span>
  227. <span>
  228. 营业执照:91500000MA5UJ59N6Q
  229. </span>
  230. <span class="my-[20px]">
  231. 违法和不良信息举报邮箱:tousu@meloinfo.com
  232. </span>
  233. <span>
  234. 联网备案号:50019002503593
  235. </span>
  236. <span class="mt-[5px]">
  237. 中国互联网违法和不良信息举报中心
  238. </span>
  239. </div>
  240. </div>
  241. </div>
  242. </div>
  243. <n-drawer v-model:show="active" :width="152" style="top:40px" placement="left">
  244. <n-drawer-content>
  245. <div class="flex flex-col items-center justify-between h-full">
  246. <div class="h-[200px]">
  247. <div v-for="item in headerTitle" :title="item.title" class="flex flex-col">
  248. <span class="py-[20px] text-[16px] text-[#161616]" @click="titleRight(item.go)">{{ item.title }}</span>
  249. </div>
  250. </div>
  251. <a href="http://p.daicrm.com/#/login" class="mb-[74px] text-[16px] text-[#0047FF]">
  252. 登录/注册
  253. </a>
  254. </div>
  255. </n-drawer-content>
  256. </n-drawer>
  257. <!-- <van-overlay :show="showModal" @click="showModal = false"> -->
  258. <van-dialog v-model:show="showModal" :show-confirm-button="false" :closeOnClickOverlay="true" closeDialog title="申请试用">
  259. <div class="wrapper" @click.stop>
  260. <div class="text-[#999999] text-[12px] pt-[10px] text-center">
  261. 为了我们能更好的服务您,请您填写以下信息,
  262. </div>
  263. <div class="text-[#999999] text-[12px] pb-[20px] mx-auto text-center">
  264. 如遇到问题,请您拨打免费服务热线
  265. </div>
  266. <n-form ref="formRef" :model="customer" :rules="rules">
  267. <n-form-item path="companyName" label="公司名称" style="width: 343px;">
  268. <n-input v-model:value="customer.companyName" @keydown.enter.prevent class="h-[40px] leading-[40px]"
  269. placeholder="请输入公司名称" />
  270. </n-form-item>
  271. <n-form-item path="city" label="所在城市">
  272. <n-input v-model:value="customer.city" class="h-[40px] leading-[40px]" placeholder="请选择所在城市" />
  273. <!-- <n-cascader v-model:value="customer.city" placeholder="请选择所在城市" class="h-[40px] leading-[40px]"
  274. :options="provice" check-strategy="child" :show-path="true" value-field="name" label-field="name" @update:value="handleUpdateValue"
  275. /> -->
  276. </n-form-item>
  277. <n-form-item path="customName" label="姓名">
  278. <n-input v-model:value="customer.customName" class="h-[40px] leading-[40px]" placeholder="请输入姓名" />
  279. </n-form-item>
  280. <n-form-item path="phone" label="联系方式">
  281. <n-input v-model:value="customer.phone" class="h-[40px] leading-[40px]" placeholder="请输入联系方式" />
  282. </n-form-item>
  283. <n-form-item path="verifyCode" label="验证码" class="">
  284. <n-input v-model:value="customer.verifyCode" class="h-[40px] leading-[40px]" placeholder="请输入验证码" />
  285. <n-button type="info" class="w-[124px] h-[40px] text-[#fff] bg-[#1f4df5] ml-[10px]" :disabled="countdown != 0"
  286. @click="verifyCodeFn">
  287. {{ countdown == 0 ? '获取验证码' : countdown }}
  288. </n-button>
  289. </n-form-item>
  290. <div class="flex justify-center">
  291. <n-button type="info" class="w-[303px] h-[40px] text-[#fff] bg-[#1f4df5]" @click="handleValidateButtonClick">
  292. 立即提交
  293. </n-button>
  294. </div>
  295. </n-form>
  296. </div>
  297. </van-dialog>
  298. <!-- <n-modal v-model:show="showModal">
  299. <n-card style="width: 343px;height: 529px;" title="申请试用" :bordered="false" size="huge" role="dialog" aria-modal="true">
  300. </n-card>
  301. </n-modal> -->
  302. <!-- <nuxt-link to="/list/123">news-1</nuxt-link> -->
  303. </template>
  304. <script lang="ts" setup>
  305. import { reactive, ref } from 'vue'
  306. import { useRouter } from 'vue-router'
  307. import { postListData, downInfo, sendSms, postCustomer } from '~/server/api/index'
  308. import { provice } from '~/utils/city'
  309. import {
  310. FormRules,
  311. useMessage,
  312. FormInst,
  313. } from 'naive-ui'
  314. // console.log('provice',provice)
  315. const router = useRouter()
  316. const headerTitle = reactive([
  317. {
  318. title: '首页',
  319. go: 'home'
  320. },
  321. {
  322. title: '解决方案',
  323. go: 'solution'
  324. },
  325. {
  326. title: '联系我们',
  327. go: 'contact'
  328. },
  329. {
  330. title: '申请试用',
  331. go: 'probation'
  332. }
  333. ]
  334. )
  335. const activeNames = ref(['1']);
  336. const titleRight = (i: string) => {
  337. if (i == 'probation') {
  338. btn()
  339. return
  340. }
  341. document.querySelector('#' + i)?.scrollIntoView()
  342. active.value = false
  343. }
  344. // 抽屉展示
  345. const active = ref(false)
  346. const sidebarActive = ref(0)
  347. const freeList = reactive(['3', '0', '7', '0', '1', '3', '7', '4'])
  348. const message = useMessage()
  349. const num = reactive([{
  350. img: '~/public/image/p_img_home_qs_0_0.png'
  351. },
  352. {
  353. img: '~/public/image/p_img_home_qs_0_1.png'
  354. },
  355. {
  356. img: '~/public/image/p_img_home_qs_0_2.png'
  357. }
  358. ])
  359. // console.log('import.meta.url', import.meta.url)
  360. const getImg = (name: number) => {
  361. return new URL(`/public/image/p_img_home_qs_0_${name}.png`, import.meta.url).href;
  362. }
  363. const currentIndex = ref(1)
  364. const traditionalIndex = ref(1)
  365. const customFn = (i: number) => {
  366. console.log('i', i)
  367. currentIndex.value = i
  368. }
  369. const traditionalIndexFn = (i: number) => {
  370. console.log('i', i)
  371. traditionalIndex.value = i
  372. }
  373. const setIntervalFn = () => {
  374. setInterval(() => {
  375. if (traditionalIndex.value >= 2) {
  376. traditionalIndex.value = 0
  377. } else {
  378. traditionalIndex.value = traditionalIndex.value + 1
  379. }
  380. if (currentIndex.value == homeList.value.length - 1) {
  381. currentIndex.value = 0
  382. } else {
  383. currentIndex.value = currentIndex.value + 1
  384. }
  385. }, 5000)
  386. }
  387. setIntervalFn()
  388. const go = (i: number) => {
  389. currentIndex.value = currentIndex.value + i
  390. if (currentIndex.value > homeList.value.length - 1) {
  391. currentIndex.value = 0
  392. return
  393. }
  394. if (currentIndex.value < 0) {
  395. currentIndex.value = homeList.value.length - 1
  396. return
  397. }
  398. }
  399. const btnContent = (i: number) => {
  400. // 跳转
  401. // console.log('跳转', i)
  402. localStorage.setItem('hryk-id', homeList.value[i].id)
  403. router.push({
  404. path: '/m_list/'
  405. })
  406. }
  407. let homeList: any = ref([])
  408. const postListDataFn = async () => {
  409. let list = await postListData({
  410. "categoryId": 1
  411. })
  412. console.log('postListDataFn', list)
  413. list.data.data ? homeList.value = list.data.data.list : ''
  414. }
  415. let bottomCode: any = ref([])
  416. postListDataFn()
  417. const downInfoFn = async () => {
  418. const list = await downInfo()
  419. console.log('list', list)
  420. bottomCode.value = list.data.data
  421. }
  422. downInfoFn()
  423. // 框显示隐藏
  424. let showModal = ref<boolean>(false)
  425. const rules: FormRules = {
  426. companyName: [
  427. {
  428. required: true,
  429. trigger: ['blur', 'input'],
  430. message: '请输入公司名称'
  431. }
  432. ],
  433. customName: [
  434. {
  435. required: true,
  436. trigger: ['blur', 'input'],
  437. message: '请输入姓名'
  438. }
  439. ],
  440. city: [
  441. {
  442. required: true,
  443. trigger: ['blur', 'input'],
  444. message: '请选择所在城市'
  445. }
  446. ],
  447. phone: [
  448. {
  449. required: true,
  450. trigger: ['blur', 'input'],
  451. message: '请输入手机号'
  452. }
  453. ],
  454. verifyCode: [
  455. {
  456. required: true,
  457. trigger: ['blur', 'input'],
  458. message: '请输入验证码'
  459. }
  460. ],
  461. }
  462. interface customerType {
  463. sceneType?: string;
  464. companyName?: null | string;
  465. customName?: null | string;
  466. city?: null | string;
  467. phone?: null | string;
  468. verifyCode?: null | string;
  469. channel?: number;
  470. }
  471. let countdown = ref(0)
  472. const customer = ref<customerType>({
  473. sceneType: "loanofficial", // 场景
  474. companyName: null,// 公司名称
  475. customName: null, // 姓名
  476. city: null, // 所在城市
  477. phone: null, // 手机号
  478. verifyCode: null, //验证码
  479. channel: 17, //pc官网16 手机端17
  480. })
  481. const verifyCodeFn = async () => {
  482. if (customer.value.phone) {
  483. if (new RegExp('^1[0-9]{10}$').test(customer.value.phone)) {
  484. let z = await sendSms({
  485. sceneType: "loanofficial",
  486. userMobile: customer.value.phone
  487. })
  488. if (z.data.code == 0) {
  489. message.success('发送成功')
  490. countdown.value = 60
  491. // this.countDown()
  492. countDown()
  493. // console.log('进来了', this.countdown)
  494. } else {
  495. message.error('发送失败')
  496. }
  497. } else {
  498. message.error('请输入正确手机号')
  499. }
  500. } else {
  501. // 唤起提示
  502. message.error('请输入手机号')
  503. }
  504. }
  505. const intervalBtn = ref()
  506. // 倒计时
  507. const countDown = () => {
  508. // 设置倒计时
  509. intervalBtn.value = setInterval(() => {
  510. if (countdown.value == 1) {
  511. // 清除定时器
  512. clearInterval(intervalBtn.value)
  513. // 重置倒计时状态
  514. countdown.value = 1
  515. };
  516. // 倒计时
  517. countdown.value--
  518. }, 1000)
  519. }
  520. const formRef = ref<FormInst | null>(null)
  521. const handleValidateButtonClick = (e: MouseEvent) => {
  522. e.preventDefault()
  523. formRef.value?.validate(async (errors) => {
  524. if (!errors) {
  525. message.success('验证成功')
  526. console.log('customer.value', customer.value)
  527. let z = await postCustomer(customer.value)
  528. console.log('zzz', z)
  529. if (z.data.msg == '成功') {
  530. // 关闭页面
  531. fouse()
  532. }
  533. } else {
  534. console.log(errors)
  535. message.error('验证失败')
  536. }
  537. })
  538. }
  539. const fouse = () => {
  540. showModal.value = false
  541. }
  542. const btn = () => {
  543. customer.value = {
  544. sceneType: "loanofficial", // 场景
  545. companyName: null,// 公司名称
  546. customName: null, // 姓名
  547. city: null, // 所在城市
  548. phone: null, // 手机号
  549. verifyCode: null, //验证码
  550. channel: 17, //pc官网16 手机端17
  551. }
  552. clearInterval(intervalBtn.value)
  553. countdown.value = 0
  554. showModal.value = true
  555. }
  556. const handleUpdateValue = (value: string) => {
  557. console.log(value, '进来了')
  558. }
  559. </script>
  560. <style scoped lang="scss">
  561. p {
  562. color: var(--link-color)
  563. }
  564. .relatives {
  565. width: 100%;
  566. height: 210px;
  567. background: url(~/public/image/img_home.png) no-repeat;
  568. background-size: cover;
  569. }
  570. .trial {
  571. background: url(~/public/image/m_try_out.png) no-repeat;
  572. background-size: cover;
  573. }
  574. .advantage {
  575. background: url(~/public/image/m_advantage.png) no-repeat;
  576. background-size: cover;
  577. }
  578. .n-carousel {
  579. width: 529px !important;
  580. }
  581. .carousel-img {
  582. width: 343px;
  583. height: 163px;
  584. margin: 0 auto;
  585. }
  586. .custom-dots {
  587. display: flex;
  588. align-items: center;
  589. justify-content: center;
  590. margin: 0 auto;
  591. padding: 0;
  592. }
  593. .custom-dots li {
  594. display: inline-block;
  595. width: 10px;
  596. height: 4px;
  597. margin: 0 3px;
  598. border-radius: 4px;
  599. background: #E1E1E1;
  600. transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  601. cursor: pointer;
  602. }
  603. .custom-dots li.is-active {
  604. width: 30px;
  605. background: #0047FF;
  606. }
  607. .custom-indicator {
  608. padding: 2px 5px;
  609. font-size: 12px;
  610. background: #fafafa;
  611. }
  612. .text1 {
  613. display: inline-block;
  614. white-space: nowrap;
  615. width: 200px;
  616. overflow: hidden;
  617. text-overflow: ellipsis;
  618. }
  619. // 框
  620. // .n-drawer.n-drawer--left-placement
  621. ::v-deep(.n-drawer) {
  622. top: 44px !important;
  623. }
  624. ::v-deep(.n-card-header__main) {
  625. flex: inherit !important;
  626. margin: 0 auto !important;
  627. }
  628. ::v-deep(.n-card-header) {
  629. padding: 0;
  630. padding-top: 50px;
  631. }
  632. ::v-deep(.n-card__content) {
  633. flex: inherit;
  634. margin: 0 auto;
  635. }
  636. ::v-deep(.n-form-item-label) {
  637. display: none !important;
  638. }
  639. ::v-deep(.n-carousel__dots) {
  640. display: none !important;
  641. }
  642. ::v-deep(.n-input__input-el) {
  643. height: 55px !important;
  644. line-height: 55px !important;
  645. }
  646. ::v-deep(.n-button) {
  647. // border: 0px !important;
  648. --n-border: 0 !important;
  649. }
  650. // 移动
  651. ::v-deep(.van-cell) {
  652. color: #fff !important;
  653. background: #131820 !important;
  654. }
  655. ::v-deep(.van-collapse-item__content) {
  656. color: #fff !important;
  657. background: #131820 !important;
  658. }
  659. ::v-deep([class*=van-hairline]:after) {
  660. border: 1px solid #262f3e !important;
  661. }
  662. ::v-deep(.van-cell:after) {
  663. border-bottom: 1px solid #262f3e !important;
  664. }
  665. ::v-deep(.van-collapse-item--border:after) {
  666. border-top: 1px solid #262f3e !important;
  667. border-top: 0 !important;
  668. }
  669. // 移动端样式
  670. ::v-deep(.n-input:not(.n-input--autosize)) {
  671. width: 260px !important;
  672. }
  673. ::v-deep(.n-card-header__main) {
  674. font-size: 18px;
  675. }
  676. ::v-deep(.n-card-header) {
  677. padding: 0 !important;
  678. padding-top: 20px !important;
  679. }
  680. ::v-deep(.n-form) {
  681. padding: 0 20px !important;
  682. padding-bottom: 30px !important;
  683. }
  684. ::v-deep(.van-popup--center) {
  685. width: 343px !important;
  686. height: 529px !important;
  687. }
  688. ::v-deep(.van-button__content) {
  689. display: none !important;
  690. }
  691. ::v-deep(.n-form-item) {
  692. --n-label-height: 5px !important;
  693. }
  694. ::v-deep(.n-collapse-item__header-main) {
  695. color: #fff !important;
  696. }
  697. ::v-deep(.n-base-icon svg) {
  698. color: #999 !important;
  699. }
  700. ::v-deep(.n-collapse .n-collapse-item:not(:first-child)) {
  701. border-top: 0.5px solid #2B374A !important;
  702. }
  703. ::v-deep(.n-divider__line){
  704. background-color: #2B374A !important;
  705. }
  706. </style>