ai传播

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

src/icons/svg/对.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692342793376" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4050" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M517.613889 1010.377409c-66.653788 0-131.336031-13.065657-192.264544-38.829395-58.812166-24.872645-111.631728-60.482966-156.977244-105.828482S87.427403 767.565592 62.543619 708.742288C36.779881 647.824914 23.714224 583.142671 23.714224 516.477744s13.065657-131.336031 38.829395-192.253404c24.872645-58.823304 60.482966-111.631728 105.828482-156.977244s98.15394-80.944698 156.977244-105.828482c60.917374-25.763738 125.599617-38.829396 192.264544-38.829396s131.336031 13.065657 192.253404 38.829396c58.823304 24.872645 111.631728 60.482966 156.977244 105.828482 45.345516 45.345516 80.944698 98.15394 105.828482 156.977244 25.763738 60.917374 38.829396 125.599617 38.829396 192.253404s-13.065657 131.336031-38.829396 192.264544c-24.872645 58.812166-60.482966 111.631728-105.828482 156.977244-45.345516 45.345516-98.15394 80.944698-156.977244 105.828482-60.917374 25.763738-125.599617 38.829396-192.253404 38.829395z m0-898.678849c-223.196624 0-404.779185 181.582561-404.779185 404.779184s181.582561 404.779185 404.779185 404.779185 404.779185-181.582561 404.779184-404.779185-181.582561-404.779185-404.779184-404.779184z m-19.091677 579.099334l285.617718-285.617717c17.398599-17.398599 17.398599-45.612844 0-63.011444-17.398599-17.398599-45.612844-17.398599-63.011444 0L467.010921 596.286299 314.088152 443.36353c-17.398599-17.398599-45.612844-17.398599-63.011443 0s-17.398599 45.612844 0 63.011443l184.43406 184.43406c8.354001 8.354001 19.693165 13.054519 31.500152 13.054518s23.146152-4.689379 31.500152-13.054518z" p-id="4051"></path></svg>

src/icons/svg/错.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1692342844274" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="5171" xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="200" height="200">
+  <path
+    d="M512 56.888889C261.688889 56.888889 56.888889 261.688889 56.888889 512s204.8 455.111111 455.111111 455.111111 455.111111-204.8 455.111111-455.111111-204.8-455.111111-455.111111-455.111111m0 853.333333c-221.866667 0-398.222222-176.355556-398.222222-398.222222s176.355556-398.222222 398.222222-398.222222 398.222222 176.355556 398.222222 398.222222-176.355556 398.222222-398.222222 398.222222"
+    fill="currentColor" p-id="5172"></path>
+  <path d="M684.942222 725.048889L302.705778 342.926222l40.220444-40.220444 382.179556 382.122666z"
+    fill="currentColor" p-id="5173"></path>
+  <path d="M298.837333 684.942222l382.122667-382.179555 40.220444 40.220444-382.122666 382.179556z"
+    fill="currentColor" p-id="5174"></path>
+</svg>

src/layouts/Header.vue

@@ -17,7 +17,7 @@
                         <li :class="{ active: route.meta.group === 'home' }" @click="jump('/')">首页</li>
                         <li :class="{ active: route.meta.group === 'chat' }" @click="jump('/chat')">AI助理</li>
                         <li :class="{ active: route.meta.group === 'business' }" @click="jump('/business')">AI商情</li>
-                        <li>AI传播</li>
+                        <li :class="{ active: route.meta.group === 'communication' }" @click="jump('/communication')">AI传播</li>
                         <li>AI献策</li>
                         <li :class="{ active: route.meta.group === 'vip' }" @click="jump('/vip')">会员服务</li>
                         <li :class="{ active: route.meta.group === 'ucenter' }" @click="jump('/ucenter/userinfo')">个人中心</li>

src/main.js

@@ -20,9 +20,9 @@ function platCheck() {
     const mobileKeywords = ['iphone', 'ipod', 'android', 'silk', 'blackberry', 'bb10', 'phone', 'mobile', 'kindle', 'opera mini', 'mobile safari', 'windows phone'];
     const isMobileDevice = mobileKeywords.some(keyword => userAgent.includes(keyword));
     if (!isMobileDevice) {
-        let _href = window.location.href;
-        let _origin = window.location.origin;
-        window.location.href = _href.replace(_origin, import.meta.env.VITE_PC_HOST);
+        // let _href = window.location.href;
+        // let _origin = window.location.origin;
+        // window.location.href = _href.replace(_origin, import.meta.env.VITE_PC_HOST);
     }
 }
 platCheck();

src/router/index.js

@@ -37,6 +37,15 @@ const router = createRouter({
                         }
                     }]
                 },
+                {
+                    path: "communication",
+                    name: "Communication",
+                    meta: {
+                        title: "AI传播",
+                        group: 'communication'
+                    },
+                    component: () => import("@/views/communication/home.vue"),
+                },
                 {
                     path: "business",
                     name: "business",

src/views/communication/components/tag-item.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex items-center inline-block">
+    <slot>
+      <div class="w-20px h-20px bg-[#636363] transform rotate-45 mr-18px"></div>
+    </slot>
+    <div class="text-22px text-[#C2C5CA]">{{ text }}</div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+})
+</script>

src/views/communication/home.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="text-white pt-136px bg-[#101011]">
+    <div class="text-45px font-light text-center">开启“智播”新纪元</div>
+    <div class="mt-31px text-22px text-[#C2C5CA] leading-29px px-54px">
+      一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字
+    </div>
+    <div class="h-350px">
+      <div class="mt-90px relative mx-42px">
+        <img
+          class="w-536px"
+          src="@/assets/images/stream/1.png"
+          alt=""
+          srcset=""
+        />
+        <img
+          class="w-188px absolute top-37px right-0"
+          src="@/assets/images/stream/2.png"
+          alt=""
+          srcset=""
+        />
+      </div>
+    </div>
+    <div class="flex px-43px mt-92px">
+      <div class="mr-54px">
+        <div class="text-27px font-bold">虚拟人直播</div>
+        <div class="mt-31px text-22px text-[#C2C5CA] leading-29px">
+          一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字
+        </div>
+        <div class="mt-43px">
+          <van-button type="primary" class="!rounded-full !h-56px !text-27px"
+            >立即体验</van-button
+          >
+        </div>
+      </div>
+      <div class="flex-none">
+        <img
+          class="w-225px h-398px"
+          src="@/assets/images/stream/3.png"
+          alt=""
+          srcset=""
+        />
+      </div>
+    </div>
+    <div class="px-42px flex mt-46px flex-wrap">
+      <TagItem class="mr-51px my-16px" text="逼真形象" />
+      <TagItem class="mr-51px my-16px" text="动作自然" />
+      <TagItem class="mr-51px my-16px" text="自动回复" />
+      <TagItem class="mr-51px my-16px" text="智能交互" />
+      <TagItem class="mr-51px my-16px" text="全天候自动直播(24/7自动直播)" />
+    </div>
+    <div class="flex px-43px mt-92px">
+      <div class="flex-none">
+        <img
+          class="w-225px h-398px"
+          src="@/assets/images/stream/4.png"
+          alt=""
+          srcset=""
+        />
+      </div>
+      <div class="ml-54px">
+        <div class="text-27px font-bold">短视频创作</div>
+        <div class="mt-31px text-22px text-[#C2C5CA] leading-29px">
+          一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字一些相关的描述文字
+        </div>
+        <div class="mt-43px">
+          <van-button type="primary" class="!rounded-full !h-56px !text-27px"
+            >立即体验</van-button
+          >
+        </div>
+      </div>
+    </div>
+    <div class="px-42px flex mt-46px flex-wrap">
+      <TagItem class="mr-51px my-16px" text="文稿撰写+语音录制" />
+      <TagItem class="mr-51px my-16px" text="自动化合成" />
+      <TagItem class="mr-51px my-16px" text="降本增效" />
+      <TagItem class="mr-51px my-16px" text="高效生产" />
+      <TagItem class="mr-51px my-16px" text="AI智能文案生成与编辑" />
+    </div>
+    <div class="mt-84px pt-53px bg01">
+      <div class="text-center text-45px font-light">一次创建，终身使用</div>
+      <div class="text-center text-22px font-light mt-31px">
+        1、2、3 ，建立你的真实形象
+      </div>
+      <div class="flex justify-between items-center px-43px mt-112px">
+        <img
+          class="w-194px"
+          src="@/assets/images/stream/5.png"
+          alt=""
+          srcset=""
+        />
+
+        <img
+          class="w-194px"
+          src="@/assets/images/stream/6.png"
+          alt=""
+          srcset=""
+        />
+        <img
+          class="w-194px"
+          src="@/assets/images/stream/7.png"
+          alt=""
+          srcset=""
+        />
+      </div>
+
+      <div
+        class="border-t border-b border-[#C2C5CA] h-180px mt-130px flex justify-center flex-wrap px-50px py-30px"
+      >
+        <TagItem class="mr-51px my-6px" text="真人上镜" />
+        <TagItem class="mr-51px my-6px" text="声音自然" />
+        <TagItem class="mr-51px my-6px" text="表情灵动" />
+        <TagItem class="mr-51px my-6px" text="形象同步" />
+        <TagItem class="mr-51px my-6px" text="动作流畅" />
+        <TagItem class="mr-51px my-6px" text="场景还原" />
+      </div>
+    </div>
+    <div>
+      <div class="text-white py-70px">
+        <div class="text-45px font-light text-center">应用场景多</div>
+        <div class="text-45px font-light text-center mt-20px">体现多元价值</div>
+      </div>
+      <img class="w-full" src="@/assets/images/stream/8.png" alt="" srcset="" />
+      <div class="py-40px">
+        <div class="px-42px py-30px">
+          <div class="font-bold text-35px">直播带货</div>
+          <div class="text-22px text-[#C2C5CA] mt-20px leading-30px">
+            <p>降低主播、场地成本，实现快速低成本创建直播间矩阵</p>
+            <p>拉升成交量优化用户画像，提升交易转化</p>
+          </div>
+        </div>
+        <div class="px-42px py-30px">
+          <div class="font-bold text-35px">企业营销</div>
+          <div class="text-22px text-[#C2C5CA] mt-20px leading-30px">
+            <p>私域流量沉淀，品效一体实现</p>
+            <p>优化品牌IP或代言人，精准获客</p>
+          </div>
+        </div>
+        <div class="px-42px py-30px">
+          <div class="font-bold text-35px">互动娱乐</div>
+          <div class="text-22px text-[#C2C5CA] mt-20px leading-30px">
+            <p>更低成本、更精细的人设打造和IP孵化</p>
+            <p>突破传统的交互方式，实现沉浸式游戏互动体验</p>
+          </div>
+        </div>
+      </div>
+      <div class="h-1px bg-[#636363] w-full"></div>
+      <div class="text-center mt-62px text-45px font-light">
+        海兔直播分身优势
+      </div>
+      <div class="text-32px font-bold text-center mt-60px z-99">
+        传统直播
+      </div>
+      <div class="mt-30px">
+        <img class="w-447px mx-auto " src="@/assets/images/stream/9.png" alt="" srcset="">
+      </div>
+
+      <div class="grid grid-cols-2 gap-20px px-30px -mt-90px">
+        <TagItem text="启用演员、摄制组和工作室">
+          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" /> 
+        </TagItem>
+        <TagItem text="制作一个视频的时间：3天">
+          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" /> 
+        </TagItem>
+        <TagItem text="后期制作需要视频剪辑技能">
+          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" /> 
+        </TagItem>
+        <TagItem text="一旦完成拍摄，很难更新内容">
+          <SvgIcon class="text-red-500 text-24px mr-10px" name="错" /> 
+        </TagItem>
+      </div>
+      <div class="text-32px font-bold text-center mt-80px z-99">
+        海兔分身
+      </div>
+      <img class="w-450px mx-auto mt-40px" src="@/assets/images/stream/102.png" alt="" srcset="">
+   
+      <div class="grid grid-cols-2 gap-y-10px px-12px">
+        <TagItem text="应用程序简单，支持多端操作">
+          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" /> 
+        </TagItem>
+        <TagItem text="制作一个视频的平均时间：5分钟">
+          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" />  
+        </TagItem>
+        <TagItem text="界面简单直观，适合初学者">
+          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" /> 
+        </TagItem>
+        <TagItem text="随时随地快速更新视频内容">
+          <SvgIcon class="text-green-500 text-24px mr-10px" name="对" /> 
+        </TagItem>
+      </div>
+      
+    </div>
+    <div class="mt-138px">
+      <div class="text-45px font-light text-white text-center">快来打造您的数字身份吧！</div>
+      <div class="flex justify-center mt-40px">
+        <img class="w-193px mx-11px" src="@/assets/images/stream/l2.png" alt="">
+        <img class="w-193px mx-11px" src="@/assets/images/stream/l3.png" alt="">
+        <img class="w-193px mx-11px" src="@/assets/images/stream/l4.png" alt="">
+      </div>
+      <div class="mt-54px text-center pb-192px">
+        <van-button type="primary" class="!rounded-full w-300px !h-68px !text-23px">联系我们</van-button>
+      </div>
+    </div>
+  
+  </div>
+</template>
+<script setup>
+import TagItem from './components/tag-item.vue'
+</script>
+<style lang="scss">
+.bg01{
+  background: url('@/assets/images/stream/bg01.png') no-repeat;
+  background-position: center;
+  background-size: auto 100%;
+}
+</style>

src/views/home/index.vue

@@ -57,7 +57,7 @@
 <script setup>
 import Assistant from '@/views/assistant/index.vue'
 import Business from '@/views/business/index.vue'
-import Stream from '@/views/stream/index.vue'
+import Stream from '@/views/communication/index.vue'
 import Course from '@/views/course/index.vue'
 
 import { Swiper, SwiperSlide } from 'swiper/vue'