feat:pc调整

assets/_variables.scss

@@ -6,4 +6,9 @@ a {
 }
 :root {
   --link-color: #1a1;
+}
+html,
+body {
+  margin: 0;
+  scroll-behavior:smooth;
 }

pages/_id.vue

@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <div v-html="list">
-</div>
-  </div>
-
-</template>
-<script>
-export default {
-  data(){
-    return{
-      list:''
-    }
-  },
-  created(){
-    console.log('this',this.$route.params.id)
-    this.postListIDFn(this.$route.params.id)
-  },
-  methods:{
-    async postListIDFn(id){
-    //  let z =  await postListID({id:id})
-    let z =  await this.$axios.$get(`https://official.webapi.bicredit.xin/api/news/detail/${id}`)
-    //  console.log('zzz',z)
-     if(z.msg == '成功'){
-      this.list = z.data.content
-     }
-    }
-  }
-}
-</script>

pages/content.vue

@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <div v-html="list">
-</div>
-  </div>
-
-</template>
-<script>
-export default {
-  data(){
-    return{
-      list:''
-    }
-  },
-  created(){
-    console.log('this',this.$route.params.id)
-    this.postListIDFn(this.$route.params.id)
-  },
-  methods:{
-    async postListIDFn(id){
-    //  let z =  await postListID({id:id})
-    let z =  await this.$axios.$get(`https://official.webapi.bicredit.xin/api/news/detail/${id}`)
-    //  console.log('zzz',z)
-     if(z.msg == '成功'){
-      this.list = z.data.content
-     }
-    }
-  }
-}
-</script>

pages/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="h-[80px] w-full bg-[#fff] flex items-center justify-between px-[12%]">
+  <div class="flex w-full">
+    <div class="flex-[1]"></div>
+    <div id="home" class="h-[80px] bg-[#fff] flex items-center justify-between w-[1200px]">
     <!-- 头部title -->
     <div class="flex items-center">
       <img src="~/public/favicon.ico" class="w-[50px] h-[50px] mr-[10px]" alt="">
@@ -12,7 +14,7 @@
     </div>
     <!-- 右边 -->
     <ul class='flex items-center'>
-      <li v-for="i in headerTitle" :key="i.go" class="px-[16px] text-[#999999] font-medium">
+      <li v-for="i in headerTitle" :key="i.go" @click="titleRight(i.go)" class="px-[16px] text-[#999999] font-medium cursor-pointer">
         {{ i.title }}
       </li>
       <li class="px-[16px] text-[#999999] font-medium">
@@ -22,6 +24,9 @@
       </li>
     </ul>
 
+    </div>
+    <div class="flex-[1]">
+    </div>
   </div>
   <!-- 图片 -->
   <div class="relative">
@@ -59,7 +64,7 @@
     <img src="~/public/image/advantage.png" class="w-full" alt="">
   </div>
   <!-- 精准获客 -->
-  <div class="flex flex-col items-center justify-center pt-[70px] pb-[70px] px-[10%]">
+  <div id="solution" class="flex flex-col items-center justify-center pt-[70px] pb-[70px] px-[10%]">
     <h2 class="text-[20px] font-medium">精准获客</h2>
     <span class="text-[#999999] px-[12px] pt-[15px] pb-[40px] text-[12px]">多渠道投放对接，帮助企业精准推广产品矩阵</span>
     <ul class="flex items-center flex-wrap justify-center pb-[50px] ">
@@ -117,13 +122,13 @@
   <div class="flex flex-col items-center justify-center pt-[70px] pb-[70px] mx-[50px]" v-if="homeList[0]">
     <h2 class="text-[20px] font-medium">资讯信息</h2>
     <span class="text-[#999999] px-[12px] pt-[15px] pb-[40px] text-[12px]">点击了解惠融易客的更多信息</span>
-    <div class="flex flex-row items-center w-[70%]">
+    <div class="flex flex-row items-center w-[100%] 2xl:px-[100px] box-border">
       <div @click="go(-1)">
         <img src="~/public/image/left.png" class="w-[50px] h-[40px]" alt="">
       </div>
-      <div class="mx-[5%] flex flex-col items-center w-[100%]">
-        <div class="flex justify-center w-[100%] pb-[20px]">
-          <n-carousel class="w-[400px]" autoplay :currentIndex="currentIndex">
+      <div class="flex flex-col items-center mx-auto">
+        <div class="flex justify-center  pb-[20px]">
+          <n-carousel  autoplay :currentIndex="currentIndex">
             <img v-for="item in homeList" class="carousel-img" :src="item.images">
           </n-carousel>
           <div class="flex flex-col justify-between ml-[50px] font-medium text-[18px] w-[500px]">
@@ -151,7 +156,7 @@
 
   </div>
   <div class="w-full bg-[#1f1d2a] px-[50px] pt-[20px] pb-[10px]" id="contact">
-    <div class="w-[60%] m-auto">
+    <div class="w-[80%] m-auto">
       <div class="flex justify-between">
         <!-- 左侧 -->
         <div class="flex">
@@ -252,9 +257,11 @@
       </n-form>
     </n-card>
   </n-modal>
+  <!-- <nuxt-link to="/list/123">news-1</nuxt-link> -->
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
+import { useRouter} from 'vue-router'
 import { postListData, downInfo, sendSms, postCustomer } from '~/server/api/index'
 import {provice} from '~/utils/city'
 import {
@@ -262,7 +269,8 @@ import {
   useMessage,
   FormInst,
 } from 'naive-ui'
-console.log('provice',provice)
+// console.log('provice',provice)
+const router =useRouter()
 const headerTitle = reactive([
   {
     title: '首页',
@@ -282,6 +290,14 @@ const headerTitle = reactive([
   }
 ]
 )
+const titleRight =(i:string)=>{
+  if(i == 'probation'){
+    btn()
+    return 
+  }
+  document.querySelector('#'+i)?.scrollIntoView()
+
+}
 const freeList = reactive(['3', '0', '7', '0', '1', '3', '7', '4'])
 const message = useMessage()
 const num = reactive([{
@@ -296,7 +312,7 @@ const num = reactive([{
 
 }
 ])
-console.log('import.meta.url', import.meta.url)
+// console.log('import.meta.url', import.meta.url)
 const getImg = (name: number) => {
   return new URL(`/public/image/p_img_home_qs_0_${name}.png`, import.meta.url).href;
 }
@@ -319,6 +335,9 @@ const go = (i: number) => {
 const btnContent = (i: number) => {
   // 跳转
   console.log('跳转',i)
+  router.push({
+    path:`/list/${homeList.value[i].id}`
+  })
 
 }
 let homeList: any = ref([])
@@ -477,12 +496,12 @@ p {
 }
 
 .n-carousel {
-  width: 400px !important;
+  width: 529px !important;
 }
 
 .carousel-img {
-  width: 400px;
-  height: 200px;
+  width: 509px;
+  height: 306px;
   // object-fit: cover;
 }
 
@@ -494,7 +513,7 @@ p {
 
 .custom-dots li {
   display: inline-block;
-  width: 30px;
+  width: 20px;
   height: 4px;
   margin: 0 3px;
   border-radius: 4px;
@@ -527,4 +546,11 @@ p {
 ::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;
+}
 </style>

pages/list/[id].vue

@@ -0,0 +1,42 @@
+<template>
+    <p v-html="list">
+    </p>
+</template>
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+import axios from 'axios'
+const route = useRoute()
+console.log('route', route.params.id)
+let list = ref('')
+const postListIDFn = async (id: string | string[]) => {
+
+  let z: any = await axios.get(`https://official.webapi.bicredit.xin/api/news/detail/${id}`)
+  console.log('zzz', z)
+  // if(z.msg == '成功'){
+  list.value = z.data.data.content
+  // console.log('list',list.value)
+  //  }
+}
+postListIDFn(route.params.id)
+// export default {
+//   data(){
+//     return{
+//       list:''
+//     }
+//   },
+//   created(){
+//     console.log('this',this.$route.params.id)
+//     this.postListIDFn(this.$route.params.id)
+//   },
+//   methods:{
+//     async postListIDFn(id){
+//     //  let z =  await postListID({id:id})
+//     let z =  await this.$axios.$get(`https://official.webapi.bicredit.xin/api/news/detail/${id}`)
+//     //  console.log('zzz',z)
+//      if(z.msg == '成功'){
+//       this.list = z.data.content
+//      }
+//     }
+//   }
+// }
+</script>

server/api/index.js

@@ -9,9 +9,10 @@ export function postListData(params) {
 }
 export function postListID(params) {
   // console.log('params',params);
-  return request('https://official.webapi.bicredit.xin/api/news/detail', {
-    method: 'get',
-    data: {...params}//get请求使用params,直接拼接在请求url上
+  return request({
+    method: 'GET',
+    url:'https://official.webapi.bicredit.xin/api/news/detail',
+    data: params//get请求使用params,直接拼接在请求url上
   })
 }
 export function downInfo() {