nuxt3-gw/pages/m_list.vue

<template>
  <div class="bg-[#fafafa]">
    <div class="flex mx-[20px] h-[44px] items-center">
      <div class="w-[24px]"  @click="titleRight">
        <!-- <img src="~/public/image/title-left.png" style="width: 24px;" alt=""> -->
        <van-icon name="arrow-left" size="24" />
      </div>
      <div class="flex-1 flex items-center justify-center">
        <img src="~/public/favicon.ico" style="width: 24px;" alt="">
      </div>
      <div class="w-[24px]">
        <a href="tel:17723267692">
          <img src="~/public/image/title-right.png" style="width: 24px;" alt="">
        </a>
      </div>
    </div>
    <div class="flex w-full flex-col items-center justify-center bg-[#f4f4f4]">
    <h1 class="my-[20px] font-black text-[30px]">
        {{title}}
      </h1>
    <div class="w-[375px]">
      <p v-html="list">
      </p>
    </div>
  </div>
  <div class="w-full bg-[#131820] pt-[20px] pb-[10px] pl-[16px] mt-[20px]" id="contact">
      <n-collapse>
        <n-collapse-item title="联系方式" name="1">
          <div class="flex flex-col text-[#999]">
            <span class="text-[12px] my-[16px]">
              客服： kefu@meloinfo.com
            </span>
            <span class="text-[12px]">
              <span>商务：</span>
              <a href="tel:17723267692" class="text-[#3061f6]"> 17723267692（微信同号）</a>
            </span>
          </div>
        </n-collapse-item>
        <n-collapse-item title="公司地址" name="2">
          <span class="text-[12px] py-[10px] text-[#999]">
            重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
          </span>
        </n-collapse-item>
        <n-collapse-item class="ncollapse" title="应用二维码(长按识别)" name="3">
          <!-- 二维码 -->
          <div class="flex items-center justify-center mr-[16px]">
            <div class="flex flex-col items-center justify-center" v-if="bottomCode.wxQrUrl">
              <img :src="bottomCode.wxQrUrl" style="width:100px;height:100px" alt="">
              <span class="text-[#999] text-[12px] mt-[10px]" style="font-size: 11px; margin-bottom: 5px;">
                关注公众号
              </span>
            </div>
            <div class="flex flex-col items-center justify-center" v-if="bottomCode.iosQrUrl" style="margin: 0 10px">
              <img :src="bottomCode.iosQrUrl" style="width:100px;height:100px" alt="">
              <span class="text-[#999] text-[12px] mt-[10px]" style="font-size: 11px; margin-bottom: 5px;">
                iosAPP下载
              </span>
            </div>
            <div class="flex flex-col items-center justify-center" v-if="bottomCode.androidQrUrl">
              <img :src="bottomCode.androidQrUrl" style="width:100px;height:100px" alt="">
              <span class="text-[#999] text-[12px] mt-[10px]" style="font-size: 11px; margin-bottom: 5px;">
                安卓APP下载
              </span>
            </div>
          </div>
        </n-collapse-item>
      </n-collapse>
      <n-divider />
      <div class=" m-auto mt-[30px]">
        <!-- 备案号 -->
        <div class="flex flex-col items-center justify-center text-[#52575E] text-[10px] my-[20px]">
          <span>Copyright © 2023 重庆惠融数字科技有限公司版权所有</span>
          <span>
            渝ICP备2023000211号-4
          </span>
          <span>
            营业执照:91500000MA5UJ59N6Q
          </span>
          <span class="my-[20px]">
            违法和不良信息举报邮箱:tousu@meloinfo.com
          </span>
          <span>
            联网备案号:50019002503593
          </span>
          <span class="mt-[5px]">
            中国互联网违法和不良信息举报中心
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import axios from 'axios'
import { postListData, downInfo, sendSms, postCustomer } from '~/server/api/index'
let list = ref('')
let title =ref('')
// 抽屉展示
const active = ref(false)
const postListIDFn = async () => {
  localStorage.getItem('hryk-id')
  // console.log('localStorage.getItem',localStorage.getItem('hryk-id'))
  let z: any = await axios.get(`https://official.webapi.bicredit.xin/api/news/detail/${localStorage.getItem('hryk-id')}`)
  console.log('zzz', z)
  // if(z.msg == '成功'){
  list.value = z.data.data.content
  title.value =z.data.data.title
  // console.log('list',list.value)
  //  }
}
postListIDFn()
let bottomCode: any = ref([])
const downInfoFn = async () => {
  const list = await downInfo()
  console.log('list', list)
  bottomCode.value = list.data.data
}
downInfoFn()
const titleRight =()=>{
  history.back()
}

</script>
<style scoped lang="scss">

.n-carousel {
  width: 529px !important;
}

.carousel-img {
  width: 343px;
  height: 163px;
  margin: 0 auto;
}

.custom-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

.custom-dots li {
  display: inline-block;
  width: 10px;
  height: 4px;
  margin: 0 3px;
  border-radius: 4px;
  background: #E1E1E1;
  transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-dots li.is-active {
  width: 30px;
  background: #0047FF;
}

.custom-indicator {
  padding: 2px 5px;
  font-size: 12px;
  background: #fafafa;
}

.text1 {
  display: inline-block;
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 框
// .n-drawer.n-drawer--left-placement
::v-deep(.n-drawer) {
  top: 44px !important;
}

::v-deep(.n-card-header__main) {
  flex: inherit !important;
  margin: 0 auto !important;
}

::v-deep(.n-card-header) {
  padding: 0;
  padding-top: 50px;
}

::v-deep(.n-card__content) {
  flex: inherit;
  margin: 0 auto;
}

::v-deep(.n-form-item-label) {
  display: none !important;
}

::v-deep(.n-carousel__dots) {
  display: none !important;
}

::v-deep(.n-input__input-el) {
  height: 55px !important;
  line-height: 55px !important;
}

::v-deep(.n-button) {
  // border: 0px !important;
  --n-border: 0 !important;
}

// 移动
::v-deep(.van-cell) {
  color: #fff !important;
  background: #131820 !important;
}

::v-deep(.van-collapse-item__content) {
  color: #fff !important;
  background: #131820 !important;
}

::v-deep([class*=van-hairline]:after) {
  border: 1px solid #262f3e !important;
}

::v-deep(.van-cell:after) {
  border-bottom: 1px solid #262f3e !important;
}

::v-deep(.van-collapse-item--border:after) {

  border-top: 1px solid #262f3e !important;
  border-top: 0 !important;
}

// 移动端样式
::v-deep(.n-input:not(.n-input--autosize)) {
  width: 260px !important;
}

::v-deep(.n-card-header__main) {
  font-size: 18px;
}

::v-deep(.n-card-header) {
  padding: 0 !important;
  padding-top: 20px !important;
}

::v-deep(.n-form) {
  padding: 0 20px !important;
  padding-bottom: 30px !important;
}

::v-deep(.van-popup--center) {
  width: 343px !important;
  height: 529px !important;
}

::v-deep(.van-button__content) {
  display: none !important;
}

::v-deep(.n-form-item) {
  --n-label-height: 5px !important;
}

::v-deep(.n-collapse-item__header-main) {
  color: #fff !important;
}

::v-deep(.n-base-icon svg) {
  color: #999 !important;
}

::v-deep(.n-collapse .n-collapse-item:not(:first-child)) {
  border-top: 0.5px solid #2B374A !important;
}
::v-deep(.n-divider__line){
  background-color: #2B374A !important;
}
</style>