ui

src/router/index.js

@@ -17,6 +17,22 @@ const router = createRouter({
                         group: 'home',  // 导航归属
                     },
                     component: () => import("@/views/home/index.vue"),
+                },
+                    {
+                    path: "insights",
+                    name: "Insights",
+                    meta: {
+                        title: "AI商情",
+                    },
+                    component: () => import("@/views/insights/home.vue"),
+                },
+                {
+                    path: "macroeconomics",
+                    name: "Macroeconomics",
+                    meta: {
+                        title: "AI商情-宏观政经",
+                    },
+                    component: () => import("@/views/macroeconomics/index.vue"),
                 },
                 {
                     path: "ucenter",

src/views/assistant/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <Layout>
+    <div class="h-full flex flex-col justify-center text-white">
+      <TitleComp title="AI助理" :src="TitleSrc" />
+      <div class="mt-36px text-27px font-bold">
+        CHATGPT接口AI助手
+      </div>
+      <div class="text-22px mt-28px text-[#C2C5CA] leading-29px">
+        在AI助理板块，用户可以上传文件给AI翻阅并帮助您解决问题，您可以自己输入关键字或者使用自带的prompt模板
+      </div>
+      
+      <div class="text-center">
+        <img class="w-618px mx-auto" src="@/assets/images/ai_assistant_02.png" />
+      </div>
+    </div>
+  </Layout>
+</template>
+<script setup>
+import TitleComp from '@/views/home/components/title.vue'
+import TitleSrc from '@/assets/images/AIASSISTANT.png'
+import Layout from '@/views/home/components/layout.vue'
+</script>

src/views/course/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <Layout>
+    <div class="h-full flex flex-col justify-center text-white">
+      <TitleComp title="AI培训" :src="TitleSrc"></TitleComp>
+      <div class="mt-38px text-27px font-bold">AI培训课程</div>
+      <div class="text-22px mt-36px text-[#C2C5CA] leading-29px">
+        在AI助理板块，用户可以上传文件给AI翻阅并帮助您解决问题，您可以自己输入关键字或者使用自带的prompt模板在AI助理板块，用户可以上传文件给AI翻阅并帮助您解决问题，您可以自己输入关键字或者使用自带的prompt模板在AI
+      </div>
+
+      <div class="mt-69px">
+        <img
+          class="w-670px mx-auto inline-block"
+          src="@/assets/images/ai_stream_01.png"
+        />
+      </div>
+    </div>
+  </Layout>
+</template>
+<script setup>
+import TitleComp from '@/views/home/components/title.vue'
+import TitleSrc from '@/assets/images/AISTREAM.png'
+import Layout from '@/views/home/components/layout.vue'
+</script>

src/views/home/components/layout.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="h-full bg-[#141516] flex flex-col px-52px">
+    <div class="flex-1">
+      <slot></slot>
+    </div>
+    <div class="flex items-center justify-center flex-none py-40px" @click="go">
+      <div
+        class="bg-[#3662FE] rounded-full h-80px text-27px flex items-center justify-center text-white w-281px"
+      >
+        立即体验
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const props = defineProps({
+  path: {
+    type: String,
+    default: '',
+  },
+})
+const go = () => {
+  if (props.path) {
+    router.push(props.path)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.page-bg {
+  background: url('@/assets/images/layout-bg.png') no-repeat;
+  background-position: center center;
+  background-size: 100% auto;
+}
+</style>

src/views/home/components/title.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="relative">
+    <div class="text-45px font-light text-white">{{ title }}</div>
+    <div class="flex -mt-12px ml-28px items-end">
+      <slot name="en">
+        <img class="h-43px w-auto" :src="src" alt="" srcset="" />
+      </slot>
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  src: {
+    type: String,
+    default: '',
+  },
+})
+</script>

src/views/home/index.vue

@@ -1,26 +1,91 @@
 <template>
-  <div class="page px-52px">
-    <div class="text-45px">移动端首页</div>
-    <div class="text-22px">在AI助理板块，用户可以上传文件给AI翻阅并帮助您解决问题，您可以自己输入关键字或者使用自带的prompt模板</div>
+  <div class="h-full flex flex-col">
+    <div class="flex-1 relative">
+      <div class="absolute top-0 h-full left-0 w-full">
+        <swiper
+          :modules="modules"
+          :direction="'vertical'"
+          :pagination="{
+            show:false,
+            clickable: false,
+          }"
+          :speed="1000"
+          :mousewheel="{
+            releaseOnEdges: false,
+          }"
+          :coverflowEffect="{
+            rotate: 0,
+            stretch: 0,
+            depth: 0,
+            modifier: 0,
+            slideShadows: false,
+          }"
+          slidesPerView="auto"
+          :spaceBetween="0"
+          class="h-full swiper flex-none"
+        >
+          <swiper-slide
+            v-for="(item, i) in list"
+            :key="i"
+            class="text-black relative"
+          >
+            <component :is="item.component" />
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+
+    <!-- <swiper-slide class="!h-178px">
+          <Footer></Footer>
+        </swiper-slide> -->
+
+    <!-- @swiper="onSwiper"
+        @slideChange="onSlideChange" -->
+
+    <!-- <div class="mt-22px">
+      <div class="relative h-80px">
+        <div
+          class="text-[#898C95] text-22px absolute top-1/2 transform -translate-y-1/2"
+        >
+          HITU AIGC@Copyright
+        </div>
+      </div>
+    </div> -->
   </div>
-  <div class="test"></div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
-import { showToast } from 'vant'
+import Assistant from '@/views/assistant/index.vue'
+import Insights from '@/views/insights/index.vue'
+import Stream from '@/views/stream/index.vue'
+import Course from '@/views/course/index.vue'
 
-onMounted(() => {
-  // showToast('页面初始化');
-})
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Mousewheel, Pagination } from 'swiper/modules'
+import 'swiper/scss'
+import 'swiper/scss/mousewheel'
+import 'swiper/css/pagination'
+
+const modules = [Mousewheel, Pagination]
+
+const list = [
+  {
+    title: 'AI助理',
+    component: Assistant,
+  }, 
+  {
+    title: 'AI情商',
+    component: Insights,
+  },
+  {
+    title: 'AI传播',
+    component: Stream,
+  },
+  {
+    title: 'AI培训',
+    component: Course,
+  },
+]
 </script>
 
-<style lang="scss" scoped>
-.page {
-}
-.test{
-  width: 750px;
-  height: 100px;
-  background: #555;
-}
-</style>
+<style lang="scss" scoped></style>

src/views/insights/components/card-item.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    @click="goPath"
+    class="min-h-280px py-24px px-32px bgImg text-white"
+    :style="{ backgroundImage: `url(${data.bg})` }"
+  >
+    <div class="flex items-center">
+      <div></div>
+      <div>{{ data.title }}</div>
+    </div>
+    <div class="text-22px leading-29px mt-28px">
+      {{ data.des }}
+    </div>
+    <div class="flex items-center justify-end mt-34px text-22px">
+      <div>详情</div>
+      <SvgIcon name="arrow-right" class="w-9px h-16px ml-12px" />
+    </div>
+  </div>
+</template>
+<script setup>
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+})
+const router = useRouter()
+const goPath = () => {
+  if (props.data.path) {
+    router.push(props.data.path)
+  } else {
+    showToast('敬请期待～')
+  }
+}
+</script>
+<style lang="scss" scoped>
+.bgImg {
+  object-fit: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+}
+</style>

src/views/insights/home.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="h-full flex items-center">
+    <div class="px-59px relative">
+      <div class="absolute h-120px w-160px z-0 left-40px -top-30px">
+        <div
+          class="w-69px h-66px bg-[#3662FE] opacity-40 absolute right-0 top-0"
+        ></div>
+        <div
+          class="w-139px h-95px bg-[#3662FE] opacity-40 absolute left-0 bottom-0"
+        ></div>
+      </div>
+      <div class="absolute h-120px w-170px z-0 right-20px -bottom-20px">
+        <div
+          class="w-139px h-95px bg-[#3662FE] opacity-40 absolute right-0 top-0"
+        ></div>
+        <div
+          class="w-69px h-66px bg-[#3662FE] opacity-40 absolute left-0 bottom-0"
+        ></div>
+      </div>
+      <div class="relative">
+        <CardItem
+          class="my-24px"
+          v-for="(item, i) in list"
+          :key="i"
+          :data="item"
+        ></CardItem>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import CardItem from './components/card-item.vue'
+import bg01 from '@/assets/images/insights_01.jpg'
+import bg02 from '@/assets/images/insights_02.jpg'
+import bg03 from '@/assets/images/insights_03.jpg'
+import bg04 from '@/assets/images/insights_04.jpg'
+const list = [
+  {
+    icon: '法律法规',
+    title: '宏观政经',
+    des: '“宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，调节控制宏观经济的运行，以达到一定的政策目标。宏观调控是公共财政的基本职责，所谓公共财政',
+    path: '/macroeconomics',
+    bg: bg01,
+  },
+  {
+    icon: '行业竞争力',
+    title: '行业洞察',
+    des: '“宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，调节控制宏观经济的运行，以达到一定的政',
+    path: '/insights/category',
+    bg: bg02,
+  },
+  {
+    icon: '政治',
+    title: '法律法规',
+    des: '“宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，',
+    path: '/insights/legal/index',
+    bg: bg03,
+  },
+  {
+    icon: '预测服务',
+    title: '商情预测',
+    des: '“宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，调节控制宏观经济的运行，以达到一定的政策目标。宏观调控是公共财政的基本职责，所谓公共财政工具，调节控制宏观经济的运行，以达到一定的政策目标。宏观调控是公共财政的基本职责，所谓公共财政',
+    path: '',
+    bg: bg04,
+  },
+]
+</script>

src/views/insights/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <Layout path="/insights">
+    <div class="h-full flex flex-col justify-center text-white">
+      <TitleComp title="AI商情" :src="TitleSrc">
+        <template #en>
+          <img class="h-104px w-auto" :src="TitleSrc" alt="" srcset="" />
+        </template>
+      </TitleComp>
+      <div class="mt-36px text-27px font-bold">AI商情预测</div>
+      <div class="text-22px mt-28px text-[#C2C5CA] leading-29px">
+        在AI助理板块，用户可以上传文件给AI翻阅并帮助您解决问题，您可以自己输入关键字或者使用自带的prompt模板在AI助理板块，用户可以上传文件给AI翻阅并帮助您解决问题，您可以自己输入关键字或者使用自带的prompt模
+      </div>
+
+      <div class="mt-61px">
+        <img
+          class="w-658px mx-auto inline-block"
+          src="@/assets/images/ai_busionessinfomation_01.png"
+        />
+      </div>
+    </div>
+  </Layout>
+</template>
+<script setup>
+import TitleComp from '@/views/home/components/title.vue'
+import TitleSrc from '@/assets/images/AIBUSINESSINFORMATION.png'
+import Layout from '@/views/home/components/layout.vue'
+</script>

src/views/macroeconomics/components/card-item.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    :style="{ backgroundImage: `url(${data.image})` }"
+    class="h-181px w-full relative bg-gray-500 bg-opacity-10 rounded-2px bg-img"
+    @click="
+      $router.push({
+        path: '/insights/legal/policy',
+        query: {
+          key: data.type_key,
+          id: data.id,
+        },
+      })
+    "
+  >
+    <div class="absolute bottom-17px left-27px text-24px font-bold">
+      {{ data.name }}
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+</script>
+<style scoped lang="scss">
+.bg-img {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+</style>

src/views/macroeconomics/components/news-item.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <div class="text-24px text-white opacity-40">2023.06.12</div>
+    <div class="mt-31px text-22px text-white leading-34px">
+      大自然是人类赖以生存发展的基本条件，尊重自然、顺应自然、保护自然是全面建设社会主
+    </div>
+  </div>
+</template>

src/views/macroeconomics/components/title.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="" v-bind="$attrs">
+    <span class="text-27px font-bold title text-white">{{ title }}</span>
+    <span v-if="sub" class="ml-18px text-24px font-bold opacity-40">{{
+      sub
+    }}</span>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  sub: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+<style lang="scss" scoped>
+.title {
+  padding-left: 16px;
+  height: 51px;
+  line-height: 51px;
+  @apply inline-block relative;
+  &::after {
+    content: '';
+    width: 8px;
+    
+    @apply rounded-3px bg-[#3662FE]  h-full absolute left-0 top-1/2 transform -translate-y-1/2;
+  }
+}
+</style>

src/views/macroeconomics/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="px-34px">
+    <div class="border border-[#A6A8AF] rounded-6px p-24px mt-62px">
+      <Title title="每周大事件" sub="new"></Title>
+      <van-divider class="my-20px" />
+      <div>
+        <NewsItem v-for="(item, i) in 3" class="my-48px" :key="i"></NewsItem>
+      </div>
+    </div>
+    <div class="border border-[#A6A8AF] rounded-6px p-24px mt-33px">
+      <Title title="内容分类"></Title>
+      <div class="grid grid-cols-2 gap-x-21px gap-y-27px py-37px">
+        <CardItem :data="{ name: '111' }"></CardItem>
+      </div>
+      <Title title="洞察趋势"></Title>
+      <div class="h-300px">
+        <swiper
+          :effect="'coverflow'"
+          :grabCursor="true"
+          :centeredSlides="true"
+          :slidesPerView="'auto'"
+          :navigation="true"
+          :coverflowEffect="{
+            rotate: -10,
+            stretch: 0,
+            depth: 0,
+            slideShadows: true,
+          }"
+          :pagination="true"
+          :modules="modules"
+          class="h-full"
+        >
+          <swiper-slide
+            v-for="(item, i) in 3"
+            :key="i"
+            class="text-black relative bg-white !w-427px"
+          >
+            <div>{{ item }}</div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import Title from './components/title.vue'
+import NewsItem from './components/news-item.vue'
+import CardItem from './components/card-item.vue'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Mousewheel, Navigation, EffectCoverflow } from 'swiper/modules'
+import 'swiper/scss'
+import 'swiper/scss/mousewheel'
+import 'swiper/css/effect-coverflow'
+import 'swiper/css/navigation';
+
+const modules = [Mousewheel, Navigation, EffectCoverflow]
+</script>

src/views/stream/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <Layout>
+    <div class="h-full flex flex-col justify-center text-white">
+      <TitleComp title="AI传播" :src="TitleSrc"></TitleComp>
+      <div class="mt-34px text-27px font-bold">AI虚拟人直播</div>
+      <div class="text-22px mt-36px text-[#C2C5CA] leading-29px">
+        在AI助理板块，用户可以上传文件给AI翻阅并帮助您解决问题，您可以自己输入关键字或者使用自带的prompt模板在AI助理板块，用户可以上传文件给AI翻阅并帮助您解决问题，您可以自己输入关键字或者使用自带的prompt模
+      </div>
+      <div class="mt-139px">
+        <img
+          class="w-670px mx-auto inline-block"
+          src="@/assets/images/ai_stream_01.png"
+        />
+      </div>
+    </div>
+  </Layout>
+</template>
+<script setup>
+import TitleComp from '@/views/home/components/title.vue'
+import TitleSrc from '@/assets/images/AISTREAM.png'
+import Layout from '@/views/home/components/layout.vue'
+</script>