├── .npmrc
├── .gitignore
├── assets
    ├── images
    │   ├── bg-top.png
    │   └── gongan.jpeg
    └── style
    │   ├── variable.scss
    │   └── base.scss
├── pages
    ├── product
    │   ├── [id].vue
    │   └── index.vue
    ├── solution
    │   ├── [id].vue
    │   ├── index.vue
    │   └── bank.vue
    ├── info
    │   └── [id].vue
    ├── about.vue
    ├── news
    │   ├── [id].vue
    │   └── index.vue
    ├── index.vue
    └── example
    │   └── index.vue
├── tsconfig.json
├── layouts
    ├── default.vue
    └── test.vue
├── app.vue
├── package.json
├── README.md
├── components
    ├── PageTop.vue
    ├── alone
    │   ├── Footer.vue
    │   ├── Pagination.vue
    │   ├── Header.vue
    │   ├── Banner.vue
    │   └── NavBar.vue
    ├── AppHeader.vue
    ├── PageProduct.vue
    └── PageSolution.vue
└── nuxt.config.ts


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 | 


--------------------------------------------------------------------------------
/assets/images/bg-top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pmb2020/alone-blog-nuxt3/HEAD/assets/images/bg-top.png


--------------------------------------------------------------------------------
/assets/images/gongan.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pmb2020/alone-blog-nuxt3/HEAD/assets/images/gongan.jpeg


--------------------------------------------------------------------------------
/pages/product/[id].vue:
--------------------------------------------------------------------------------
1 | <template>
2 | </template>
3 | 
4 | <script>
5 | </script>
6 | 
7 | <style>
8 | </style>


--------------------------------------------------------------------------------
/pages/solution/[id].vue:
--------------------------------------------------------------------------------
1 | <template>
2 | </template>
3 | 
4 | <script>
5 | </script>
6 | 
7 | <style>
8 | </style>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/pages/solution/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<PageTop title="解决方案" />
 4 | 		解决方案
 5 | 	</div>
 6 | </template>
 7 | 
 8 | <script>
 9 | </script>
10 | 
11 | <style>
12 | </style>


--------------------------------------------------------------------------------
/assets/style/variable.scss:
--------------------------------------------------------------------------------
1 | $primary: #49240F;
2 | $secondary: #E4A79D;
3 | $body-bg: #f2f7ff;
4 | 
5 | $primary-color:#e63130;
6 | 
7 | $header-height: 6rem;
8 | $page-top-item-height:24rem;
9 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<AppHeader />
 4 | 		<slot />
 5 | 		<AloneFooter />
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <script>
10 | </script>
11 | 
12 | <style>
13 | </style>


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 | 	  <NuxtLayout :name="layout">
 4 | 		  <NuxtPage />
 5 | 	  </NuxtLayout>
 6 |   </div>
 7 | </template>
 8 | <script setup>
 9 | 	const layout = 'default';
10 | </script>
11 | 


--------------------------------------------------------------------------------
/layouts/test.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<AloneFooter />
 4 | 		<p>我test布局</p>
 5 | 		<slot />
 6 | 		<MyHeader />
 7 | 	</div>
 8 | </template>
 9 | 
10 | <script>
11 | </script>
12 | 
13 | <style>
14 | </style>


--------------------------------------------------------------------------------
/pages/info/[id].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		我的id是
 4 | 		<p>{{ $route.params.id }}</p>
 5 | 		<AlonePagination />
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <script setup>
10 | 	const route = useRoute()
11 | 	console.log('id参数为：'+route.params.id)
12 | </script>
13 | 
14 | <style>
15 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare"
 9 |   },
10 |   "devDependencies": {
11 |     "@nuxtjs/tailwindcss": "^6.1.3",
12 |     "nuxt": "3.0.0",
13 |     "sass": "^1.56.1"
14 |   },
15 |   "dependencies": {
16 |     "swiper": "^8.4.4"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # alone-blog
 2 | 
 3 | nuxt3+tailwindcss快速搭建个人博客、门户网站、企业官网
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # yarn
11 | yarn install
12 | 
13 | # npm
14 | npm install
15 | 
16 | # pnpm
17 | pnpm install --shamefully-hoist
18 | ```
19 | 
20 | ## Development Server
21 | 
22 | Start the development server on http://localhost:3000
23 | 
24 | ```bash
25 | npm run dev
26 | ```
27 | 
28 | ## Production
29 | 
30 | Build the application for production:
31 | 
32 | ```bash
33 | npm run build
34 | ```
35 | 
36 | Locally preview production build:
37 | 
38 | ```bash
39 | npm run preview
40 | ```
41 | 
42 | Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
43 | 


--------------------------------------------------------------------------------
/components/PageTop.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="page-top" :style="style">
 3 | 		<h2>{{props.title}}</h2>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | 	const props = defineProps({
 9 | 		title: {
10 | 			type:String,
11 | 		},
12 | 		height:{
13 | 			type:String,
14 | 			default: '350px'
15 | 		}
16 | 	})
17 | 	const style = ref({
18 | 		height:props.height,
19 | 	})
20 | </script>
21 | 
22 | <style scoped>
23 | 	.page-top{
24 | 		width: 100%;
25 | 		height: $page-top-item-height;
26 | 		background-image: url("~/assets/images/bg-top.png");
27 | 		background-size: 100% 100%;
28 | 		display: flex;
29 | 		align-items: center;
30 | 	}
31 | 	.page-top h2{
32 | 		color: #fff;
33 | 		font-size: 3.5rem;
34 | 		margin-left: 10%;
35 | 	}
36 | </style>


--------------------------------------------------------------------------------
/components/alone/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<footer class="footer">
 3 | 		<p>
 4 | 			<nuxt-link class="" target="_blank" to="http://beian.miit.gov.cn" ref="nofollow">京ICP备2022025170号-1 </nuxt-link>
 5 | 			<img style="display: inline-block;margin-left: 4px;" src="~/assets/images/gongan.jpeg" alt="">
 6 | 			<nuxt-link class="" target="_blank" to="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=1" ref="nofollow">京公网安备 11010802021733号</nuxt-link>
 7 | 		</p>
 8 | 		<p>先锋音讯公司 © 版权所有  公司地址：中国北京市海淀区中关村东路66号世纪科贸大厦C座22层</p>
 9 | 	</footer>
10 | </template>
11 | 
12 | <script setup>
13 | 	
14 | </script>
15 | 
16 | <style>
17 | 	.footer{
18 | 		background-color: #374151;
19 | 		color: #fff;
20 | 		display: flex;
21 | 		justify-content: center;
22 | 		align-items: center;
23 | 		flex-direction: column;
24 | 		padding: 2rem;
25 | 		font-size: 14px;
26 | 	}
27 | </style>


--------------------------------------------------------------------------------
/components/alone/Pagination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="al-pagination">
 3 | 		<ul class="al-pagination-ul">
 4 | 			<li>上一页</li>
 5 | 			<li :class="{'active':index==page}" v-for="index in 5">
 6 | 				<nuxt-link @click="page=index" :to="'?page='+index">{{index}}</nuxt-link>
 7 | 			</li>
 8 | 			<li>下一页</li>
 9 | 		</ul>
10 | 	</div>
11 | </template>
12 | 
13 | <script setup>
14 | 	const route = useRoute()
15 | 	const page = ref(route.query.page || 1)
16 | 	const pageSize = ref(20)
17 | </script>
18 | 
19 | <style lang="scss">
20 | 	.al-pagination-ul {
21 | 		display: flex;
22 | 		justify-content: center;
23 | 		align-items: center;
24 | 		width: 100%;
25 | 		color: #333;
26 | 		li {
27 | 			cursor: pointer;
28 | 			margin: 1rem 0.5rem;
29 | 			background-color: #fff;
30 | 			a{
31 | 				display: inline-block;
32 | 				padding: 0.1rem 1.2rem;
33 | 			}
34 | 		}
35 | 		.active {
36 | 			color: #fff;
37 | 			background-color: #111;
38 | 		}
39 | 	}
40 | </style>
41 | 


--------------------------------------------------------------------------------
/components/alone/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<header class="header">
 3 | 		<div>
 4 | 			Logo
 5 | 		</div>
 6 | 		<AloneNavBar :data="navList" />
 7 | 	</header>
 8 | 	<div class="header-white"></div>
 9 | </template>
10 | 
11 | <script setup>
12 | 	const navIndex = ref(0)
13 | 	const navList = ref([
14 | 		{name:'首页',link:'/'},
15 | 		{name:'产品中心',link:'/',children:[
16 | 			{name:'产品1号',link:'/'},
17 | 			{name:'产品2号',link:'/'},
18 | 			{name:'产品3号',link:'/'},
19 | 		]},
20 | 		{name:'解决方案',link:'/'},
21 | 		{name:'用户案例',link:'/'},
22 | 		{name:'新闻中心',link:'/news'},
23 | 		{name:'关于我们',link:'/about'},
24 | 	])
25 | </script>
26 | 
27 | <style lang="scss">
28 | 	.header {
29 | 		display: flex;
30 | 		justify-content: space-between;
31 | 		align-items: center;
32 | 		background-color: #fff;
33 | 		z-index: 999;
34 | 		padding: 0 10%;
35 | 		position: fixed;
36 | 		top: 0;
37 | 		left: 0;
38 | 		width: 100%;
39 | 		height: $header-height;
40 | 	}
41 | 	.header-white{
42 | 		height: $header-height
43 | 	}
44 | </style>
45 | 


--------------------------------------------------------------------------------
/components/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<header class="header">
 3 | 		<div>
 4 | 			<img class="h-16" src="http://www.pioneerw.com/img/blogo.jpg" alt="">
 5 | 		</div>
 6 | 		<AloneNavBar :data="navList" />
 7 | 	</header>
 8 | 	<div class="header-white"></div>
 9 | </template>
10 | 
11 | <script setup>
12 | 	const navIndex = ref(0)
13 | 	const navList = ref([
14 | 		{name:'首页',link:'/'},
15 | 		{name:'产品中心',link:'/product'},
16 | 		{name:'解决方案',link:'#',children:[
17 | 			{name:'银行解决方案',link:'/solution/bank'},
18 | 			{name:'证券解决方案',link:'/solution/bank'},
19 | 			{name:'高铁解决方案',link:'/solution/bank'},
20 | 		]},
21 | 		{name:'用户案例',link:'/example'},
22 | 		{name:'新闻中心',link:'/news'},
23 | 		{name:'关于我们',link:'/about'},
24 | 	])
25 | </script>
26 | 
27 | <style lang="scss">
28 | 	.header {
29 | 		position: relative;
30 | 		display: flex;
31 | 		justify-content: space-between;
32 | 		align-items: center;
33 | 		background-color: #fff;
34 | 		z-index: 999;
35 | 		padding: 0 10%;
36 | 		position: fixed;
37 | 		top: 0;
38 | 		left: 0;
39 | 		width: 100%;
40 | 		height: $header-height;
41 | 	}
42 | 	.header-white{
43 | 		height: $header-height
44 | 	}
45 | </style>
46 | 


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="about">
 3 | 		<PageTop title="关于我们" />
 4 | 		<div class="al-container mx-auto mt-12">
 5 | 			<article class="leading-9">
 6 | 				<h3 class="text-4xl mb-6 font-semibold">公司简介</h3>
 7 | 				<p>先锋音讯公司，于2006年8月在北京海淀区中关村高科技园区创立。先锋音讯始终坚持专心、专一、专注于AI技术研发与客户服务；先后荣获“国家高新技术企业”、“北京中关村科技企业家协会副会长单位”等称号，拥有专利及软件著作权证书20余项，获得ISO质量管理体系认证。
 8 | 				</p>
 9 | 				<p>公司在语音采集、跨地区集中云管理、语音大数据分析、AI核心算法等领域拥有国内领先的技术方案和专家团队，相关产品在党政机关、公检法司系统、交通、电力、能源、金融、证券、银行、保险、教育、医疗、物流、旅游、餐饮、房地产、互联网、广告媒体等领域得到了广泛应用，客户超过30多万家，产品远销东盟六国，印度、俄罗斯、非洲、台湾、香港等地区。
10 | 				</p>
11 | 				<p>先锋音讯作为中国语音数据采集、统计、分析领域的开拓者，以人工智能+大数据的方式，通过不断更新和迭代，结合ASR、NLP、机器学习算法等先进技术，打造出适用于企业管理全流程的AI产品矩阵和解决方案，为政府机关和企业提供“办公云语音数据分析平台”、“AI客服质检”等人工智能服务。
12 | 				</p>
13 | 			</article>
14 | 		</div>
15 | 	</div>
16 | </template>
17 | 
18 | <script setup>
19 | 	useHead({
20 | 		title:'关于我们 - 企业官网',
21 | 		meta:[
22 | 			{name:'description',content:'关于我们页面'}
23 | 		],
24 | 		bodyAttrs:{
25 | 			class:'aboutkkk'
26 | 		},
27 | 		script:[
28 | 			{children:'console.log(\'关于我们\')'}
29 | 		]
30 | 	})
31 | </script>
32 | 
33 | <style lang="scss">
34 | 	.about{
35 | 		min-height: 1200px;
36 | 		article p{
37 | 			text-indent: 2em;
38 | 			margin-bottom: 15px;
39 | 			color: #555;
40 | 		}
41 | 	}
42 | </style>
43 | 


--------------------------------------------------------------------------------
/pages/news/[id].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<PageTop title="新闻详情" />
 4 | 		<div class="al-container mx-auto mt-10" style="min-height: 1000px;">
 5 | 			<div class="text-slate-500">
 6 | 				您所在的位置：首页 / 新闻中心
 7 | 			</div>
 8 | 			<div style="margin-top: 2rem;">
 9 | 				<h3 style="text-align: center;font-size: 2rem;margin-bottom: 2rem;color: #333;">文章ID{{route.params.id}}：先锋AI转写一体云录音系统</h3>
10 | 				<article class="leading-9" style="text-indent: 2em;color: #555;">
11 | 					<p style="margin-bottom: 15px;">先锋音讯公司，于2006年8月在北京海淀区中关村高科技园区创立。先锋音讯始终坚持专心、专一、专注于AI技术研发与客户服务；先后荣获“国家高新技术企业”、“北京中关村科技企业家协会副会长单位”等称号，拥有专利及软件著作权证书20余项，获得ISO质量管理体系认证。
12 | 					</p>
13 | 					<p style="margin-bottom: 15px;">公司在语音采集、跨地区集中云管理、语音大数据分析、AI核心算法等领域拥有国内领先的技术方案和专家团队，相关产品在党政机关、公检法司系统、交通、电力、能源、金融、证券、银行、保险、教育、医疗、物流、旅游、餐饮、房地产、互联网、广告媒体等领域得到了广泛应用，客户超过30多万家，产品远销东盟六国，印度、俄罗斯、非洲、台湾、香港等地区。
14 | 					</p>
15 | 					<p style="margin-bottom: 15px;">先锋音讯作为中国语音数据采集、统计、分析领域的开拓者，以人工智能+大数据的方式，通过不断更新和迭代，结合ASR、NLP、机器学习算法等先进技术，打造出适用于企业管理全流程的AI产品矩阵和解决方案，为政府机关和企业提供“办公云语音数据分析平台”、“AI客服质检”等人工智能服务。
16 | 					</p>
17 | 				</article>
18 | 			</div>
19 | 		</div>
20 | 	</div>
21 | </template>
22 | 
23 | <script setup>
24 | 	const route = useRoute()
25 | 	console.log('id参数为：'+route.params.id)
26 | </script>
27 | 
28 | <style>
29 | </style>


--------------------------------------------------------------------------------
/components/PageProduct.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<section class="al-container mx-auto mt-12">
 3 | 		<div class="flex justify-between mb-6">
 4 | 			<div>
 5 | 				<h2 class="md:text-4xl md:mb-2" style="color: #12205B;font-weight: 600;">产品中心</h2>
 6 | 				<p class="hidden md:block text-xs md:text-2xl" style="font-style: italic;color: #d6dbe4;">PRODUCT CENTER</p>
 7 | 			</div>
 8 | 			<div class="flex items-center">
 9 | 				<div class="bar"></div>
10 | 				<p class="text-xs md:text-lg text-slate-400"><nuxt-link to="/product">查看更多></nuxt-link></p>
11 | 			</div>
12 | 		</div>
13 | 		<div class="grid grid-cols-3 gap-10">
14 | 			<div>
15 | 				<img src="http://www.pioneerw.com/html/ipDianHua/3.jpg" alt="">
16 | 			</div>
17 | 			<div>
18 | 				<img src="http://www.pioneerw.com/html/ipDianHua/3.jpg" alt="">
19 | 			</div>
20 | 			<div>
21 | 				<img src="http://www.pioneerw.com/html/ipDianHua/3.jpg" alt="">
22 | 			</div>
23 | 			<div>
24 | 				<img src="http://www.pioneerw.com/html/ipDianHua/3.jpg" alt="">
25 | 			</div>
26 | 			<div>
27 | 				<img src="http://www.pioneerw.com/html/ipDianHua/3.jpg" alt="">
28 | 			</div>
29 | 			<div>
30 | 				<img src="http://www.pioneerw.com/html/ipDianHua/3.jpg" alt="">
31 | 			</div>
32 | 		</div>
33 | 	</section>
34 | </template>
35 | 
36 | <script>
37 | </script>
38 | 
39 | <style>
40 | </style>


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://v3.nuxtjs.org/api/configuration/nuxt.config
 2 | export default defineNuxtConfig({
 3 | 	modules: ['@nuxtjs/tailwindcss'],
 4 | 	app: {
 5 | 		head: {
 6 | 			charset: 'utf-8',
 7 | 			title: 'VAA先锋音讯企业官网',
 8 | 			meta: [
 9 | 				{ name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' },
10 | 				{ name: 'description', content: 'VAA先锋音讯企业官网' }
11 | 			]
12 | 		}
13 | 	},
14 | 	tailwindcss: {
15 | 		config: {
16 | 			theme: {
17 | 				screens: {
18 | 					'sm': '640px',
19 | 					// => @media (min-width: 640px) { ... }
20 | 	
21 | 					'md': '768px',
22 | 					// => @media (min-width: 768px) { ... }
23 | 	
24 | 					'lg': '1024px',
25 | 					// => @media (min-width: 1024px) { ... }
26 | 	
27 | 					'xl': '1280px',
28 | 					// => @media (min-width: 1280px) { ... }
29 | 	
30 | 					'2xl': '1536px',
31 | 					// => @media (min-width: 1536px) { ... }
32 | 				},
33 | 				extend: {
34 | 					height: {
35 | 						'100': '25rem',
36 | 						'104': '26rem'
37 | 					}
38 | 				}
39 | 			}
40 | 		}
41 | 	},
42 | 	css: [
43 | 		'~/assets/style/base.scss',
44 | 	],
45 | 	vite: {
46 | 		css: {
47 | 			preprocessorOptions: {
48 | 				scss: {
49 | 					additionalData: '@use "@/assets/style/variable.scss" as *;'
50 | 				}
51 | 			}
52 | 		}
53 | 	}
54 | })
55 | 


--------------------------------------------------------------------------------
/components/alone/Banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="al-banner">
 3 | 		<swiper class="swiper" :autoplay="{ delay: 5000,}" :pagination="{ clickable: true, }" :navigation="true"
 4 | 			:modules="modules">
 5 | 			<swiper-slide v-for="(banner,index) in data" :key="index">
 6 | 				<img :src="banner.image" :title="banner.title" alt="">
 7 | 			</swiper-slide>
 8 | 		</swiper>
 9 | 	</div>
10 | </template>
11 | 
12 | <script setup>
13 | 	import {Swiper,SwiperSlide} from "swiper/vue";
14 | 	import "swiper/css";
15 | 	import "swiper/css/pagination";
16 | 	import "swiper/css/navigation";
17 | 	import {Autoplay,Pagination,Navigation} from "swiper";
18 | 	const modules = ref([Autoplay, Pagination, Navigation])
19 | 	const {data} = defineProps(['data'])
20 | </script>
21 | <style lang="scss">
22 | 	.swiper {
23 | 		width: 100%;
24 | 		height: 100%;
25 | 	}
26 | 	
27 | 	.swiper-slide {
28 | 		text-align: center;
29 | 		font-size: 18px;
30 | 		background: #fff;
31 | 		display: flex;
32 | 		justify-content: center;
33 | 		align-items: center;
34 | 	}
35 | 	
36 | 	.swiper-slide img {
37 | 		display: block;
38 | 		width: 100%;
39 | 		height: 100%;
40 | 	}
41 | 	
42 | 	.asdas {
43 | 		color: $primary;
44 | 	}
45 | 	
46 | 	.news-list-ul {
47 | 		h3 {
48 | 			font-weight: bold;
49 | 			color: #333;
50 | 			overflow: hidden;
51 | 			text-overflow:ellipsis;
52 | 			white-space: nowrap;
53 | 		}
54 | 	}
55 | </style>
56 | 


--------------------------------------------------------------------------------
/assets/style/base.scss:
--------------------------------------------------------------------------------
 1 | .al-container{
 2 | 	margin-left: auto;
 3 | 	margin-right: auto;
 4 | 	max-width: 100%;
 5 | 	padding: 15px;
 6 | }
 7 | @media (min-width:576px) {
 8 | 	.al-container{
 9 | 		max-width: 540px;
10 | 	}
11 | }
12 | @media (min-width:768px) {
13 | 	.al-container{
14 | 		max-width: 720px;
15 | 	}
16 | }
17 | 
18 | @media (min-width:992px) {
19 | 	.al-container{
20 | 		max-width: 960px;
21 | 	}
22 | }
23 | 
24 | @media (min-width:1200px) {
25 | 	.al-container{
26 | 		max-width: 1140px;
27 | 	}
28 | }
29 | 
30 | @media (min-width:1400px) {
31 | 	.al-container{
32 | 		max-width: 1320px;
33 | 	}
34 | }
35 | 
36 | body{	
37 | 	background-color: $body-bg;
38 | }
39 | 
40 | ::-webkit-scrollbar {
41 |   /*滚动条整体样式*/
42 |   width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
43 |   height: 1px;
44 | }
45 | ::-webkit-scrollbar-thumb {
46 |   /*滚动条里面小方块*/
47 |   border-radius: 10px;
48 |   box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
49 |   background: #cccccc;
50 | }
51 | ::-webkit-scrollbar-track {
52 |   /*滚动条里面轨道*/
53 |   box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
54 |   border-radius: 10px;
55 |   background: #fff;
56 | }
57 | 
58 | .new-title{
59 | 	font-weight: bold;
60 | 	font-size: 1.5rem;
61 | 	color: #333;
62 | 	overflow: hidden;
63 | 	text-overflow:ellipsis;
64 | 	white-space: nowrap;
65 | 	margin-bottom: 1rem;
66 | 	cursor: pointer;
67 | }
68 | .new-title:hover{
69 | 	color: $primary-color;
70 | }
71 | 
72 | .section-title{
73 | 	text-align: center;
74 | 	font-size: 32px;
75 | 	font-weight: bold;
76 | 	color: #12205B;
77 | 	margin-bottom: 3rem;
78 | }


--------------------------------------------------------------------------------
/pages/product/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="product mb-16">
 3 | 		<PageTop title="产品中心" />
 4 | 		<div class="al-container md:mt-9">
 5 | 			<div>
 6 | 				<ul class="category-ul">
 7 | 					<li class="mb-2 mr-3" :class="{'active':categoryIndex==index}" v-for="(item,index) in categories" @click="categoryClick(index)" :key="index">
 8 | 						{{item.name}}
 9 | 					</li>
10 | 				</ul>
11 | 			</div>
12 | 			<div class="mt-3 md:mt-10">
13 | 				<div class="grid grid-cols-2 md:grid-cols-4 gap-10">
14 | 					<div v-for="(item,index) in productList" :key="index">
15 | 						<img class="h-44 md:h-64 rounded-lg" :src="item.image" :title="item.title" :alt="item.title">
16 | 						<p class="mt-1">{{item.title}}</p>
17 | 					</div>
18 | 				</div>
19 | 			</div>
20 | 		</div>
21 | 	</div>
22 | </template>
23 | 
24 | <script setup>
25 | 	const categoryIndex = ref(0)
26 | 	const categories = ref([
27 | 		{id:1,name:'全部'},
28 | 		{id:2,name:'录音仪'},
29 | 		{id:3,name:'录音盒'},
30 | 		{id:4,name:'录音卡'},
31 | 		{id:4,name:'IP电话'},
32 | 		{id:5,name:'手机录音'},
33 | 		{id:6,name:'智能工牌'},
34 | 	])
35 | 	const productList = ref([
36 | 		{id:1,title:'先锋产品一box10',image:'http://www.pioneerw.com/html/ipDianHua/3.jpg'},
37 | 		{id:1,title:'box10',image:'http://www.pioneerw.com/html/ipDianHua/2.jpg'},
38 | 		{id:1,title:'box10',image:'http://www.pioneerw.com/html/ipDianHua/1.jpg'},
39 | 		{id:1,title:'智能双模IP录音',image:'http://www.pioneerw.com/html/ipDianHua/4.jpg'},
40 | 		{id:1,title:'先锋产品一-测试',image:'http://www.pioneerw.com/html/ipDianHua/1.jpg'},
41 | 	])
42 | 	const categoryClick = (index)=>{
43 | 		categoryIndex.value = index
44 | 	}
45 | </script>
46 | 
47 | <style lang="scss" scoped>
48 | 	.category-ul{
49 | 		display: flex;
50 | 		flex-wrap: wrap;
51 | 		li{
52 | 			cursor: pointer;
53 | 			padding:0.3rem 1rem;
54 | 			border-radius: 5px;
55 | 		}
56 | 		.active{
57 | 			background-color: $primary-color;
58 | 			color: #fff;
59 | 		}
60 | 	}
61 | </style>


--------------------------------------------------------------------------------
/pages/news/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="news">
 3 | 		<PageTop title="新闻中心" />
 4 | 		<div class="al-container mx-auto mt-10" style="min-height: 1000px;">
 5 | 			<div class="text-slate-500">
 6 | 				您所在的位置：首页 / 新闻中心
 7 | 			</div>
 8 | 			<div class="mt-10">
 9 | 				<ul>
10 | 					<li class="md:flex mb-16" v-for="(newsItem,index) in newsList" :key="index">
11 | 						<div class="md:w-1/4 mb-3">
12 | 							<nuxt-link :to="'/news/'+newsItem.id">
13 | 								<img class="rounded-lg w-full h-56" :title="newsItem.title" :src="newsItem.image" >
14 | 							</nuxt-link>
15 | 						</div>
16 | 						<div class="md:w-3/4 md:ml-10">
17 | 							<h3 class="new-title">
18 | 								<nuxt-link :to="'/news/'+newsItem.id">{{newsItem.title}}</nuxt-link>
19 | 							</h3>
20 | 							<!-- <p class="text-slate-400">日期：{{newsItem.date}}</p> -->
21 | 							<p class="text-slate-400">{{newsItem.desc}}</p>
22 | 						</div>
23 | 					</li>
24 | 				</ul>
25 | 			</div>
26 | 			<AlonePagination />
27 | 		</div>
28 | 	</div>
29 | </template>
30 | 
31 | <script setup>
32 | 	import {ref} from 'vue'
33 | 	const newsList = ref([{
34 | 			id:1,
35 | 			title: '先锋AI转写一体云录音系统',
36 | 			image:'http://www.pioneerw.com/3.0/style/image/4.png',
37 | 			desc:'先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统',
38 | 			date: '2022-11-14 16:44'
39 | 		},
40 | 		{
41 | 			id:2,
42 | 			title: '2022年人工智能领域发展七大趋势',
43 | 			image:'http://www.pioneerw.com/3.0/style/image/3.png',
44 | 			desc:'先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统',
45 | 			date: '2022-11-12 13:12'
46 | 		},
47 | 		{
48 | 			id:3,
49 | 			title: '先锋云录音系统助力铁路行业对讲机、售票窗口录音',
50 | 			image:'http://www.pioneerw.com/3.0/style/image/2.png',
51 | 			desc:'先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统',
52 | 			date: '2022-11-12 13:12'
53 | 		},
54 | 		{
55 | 			id:4,
56 | 			title: '先锋音讯应邀参加  2019第四届上海国际人工智能展',
57 | 			image:'http://www.pioneerw.com/3.0/style/image/1.png',
58 | 			desc:'先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统',
59 | 			date: '2022-11-12 13:12'
60 | 		},
61 | 		{
62 | 			id:5,
63 | 			title: '先锋音讯中标广铁集团 VAA技术融入铁路行业专网',
64 | 			image:'http://www.pioneerw.com/3.0/style/image/5.png',
65 | 			desc:'先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统先锋AI转写一体云录音系统',
66 | 			date: '2022-11-12 13:12'
67 | 		},
68 | 	])
69 | </script>
70 | 
71 | <style lang="scss">
72 | 	.news{
73 | 		background-color: #fff;
74 | 	}
75 | </style>


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<Head>
  4 | 			<Title>{{title}}</Title>
  5 | 			<Meta name="description" :content="title" />
  6 | 			<!-- <Style type="text/css" children="body { background-color: green; }" /> -->
  7 | 		</Head>
  8 | 		<AloneBanner class="h-44 md:h-auto" :data='bannerList' />
  9 | 		<!-- 新闻中心 -->
 10 | 		<div class="py-1 md:py-8" style="background-color: #fff;">
 11 | 			<section class="al-container">
 12 | 				<div class="flex justify-between mb-6">
 13 | 					<div>
 14 | 						<h2 class="md:text-4xl md:mb-2" style="color: #333;font-weight: 600;">新闻中心</h2>
 15 | 						<p class="hidden md:block text-xs md:text-2xl" style="font-style: italic;color: #d6dbe4;">NEWS CENTER</p>
 16 | 					</div>
 17 | 					<div class="flex items-center">
 18 | 						<div class="bar"></div>
 19 | 						<p class="text-xs md:text-lg text-slate-400">先锋音讯16年品质保证，值得您信赖的伙伴</p>
 20 | 					</div>
 21 | 				</div>
 22 | 				<div class="md:flex">
 23 | 					<div class="md:w-1/2 mb-8">
 24 | 						<img class="rounded-lg w-full h-52 md:h-100" src="http://www.pioneerw.com/3.0/style/image/4.png">
 25 | 					</div>
 26 | 					<div class="p-1 md:w-1/2 md:ml-10">
 27 | 						<ul class="news-list-ul">
 28 | 							<li class="mb-5 md:mb-10" v-for="(newsItem,index) in newsList" :key="index">
 29 | 								<h3>
 30 | 									<Nuxt-link class="text-lg" to="/about">
 31 | 										<span class="num" style="">{{index+1}}</span>
 32 | 										{{newsItem.title}}
 33 | 										<span class="hidden md:block" style="color: #999;float: right;font-weight: normal;font-size: 1rem;">{{newsItem.date}}</span>
 34 | 									</Nuxt-link>
 35 | 								</h3>
 36 | 							</li>
 37 | 						</ul>
 38 | 					</div>
 39 | 				</div>
 40 | 			</section>
 41 | 		</div>
 42 | 		<!-- 行业解决方案 -->
 43 | 		<PageSolution />
 44 | 		<!-- 产品中心 -->
 45 | 		<PageProduct />
 46 | 	</div>
 47 | </template>
 48 | 
 49 | <script setup>
 50 | 	const title = ref('VAA先锋音讯企业官网')
 51 | 	const bannerList = ref([{
 52 | 			title: '这是一个title',
 53 | 			image: 'http://www.pioneerw.com/res/images/banner/213525321.jpg'
 54 | 		},
 55 | 		{
 56 | 			title: '这是一个title',
 57 | 			image: 'http://www.pioneerw.com/res/images/banner/213525321.jpg'
 58 | 		},
 59 | 		{
 60 | 			title: '这是一个title',
 61 | 			image: 'http://www.pioneerw.com/res/images/banner/213525321.jpg'
 62 | 		},
 63 | 	])
 64 | 	const newsList = ref([{
 65 | 			title: '先锋AI转写一体云录音系统',
 66 | 			date: '2022-11-14'
 67 | 		},
 68 | 		{
 69 | 			title: '2022年人工智能领域发展七大趋势',
 70 | 			date: '2022-11-12'
 71 | 		},
 72 | 		{
 73 | 			title: '先锋云录音系统助力铁路行业对讲机、售票窗口录音',
 74 | 			date: '2022-11-12'
 75 | 		},
 76 | 		{
 77 | 			title: '先锋音讯应邀参加  2019第四届上海国际人工智能展',
 78 | 			date: '2022-11-12'
 79 | 		},
 80 | 		{
 81 | 			title: '先锋音讯中标广铁集团 VAA技术融入铁路行业专网',
 82 | 			date: '2022-11-12'
 83 | 		},
 84 | 		{
 85 | 			title: '2022年人工智能领域发展七大趋势',
 86 | 			date: '2022-11-12'
 87 | 		},
 88 | 	])
 89 | </script>
 90 | 
 91 | <style>
 92 | 	.num{
 93 | 		color: #fff;
 94 | 		font-weight: normal;
 95 | 		padding: 2px 12px;
 96 | 		font-size: 1rem;
 97 | 		margin-right: 5px;
 98 | 		background-color: #a9a5a5;
 99 | 		border-radius: 1px;
100 | 	}
101 | 	.news-list-ul li:nth-child(1) .num{
102 | 		background-color: #fb0d0d;
103 | 	}
104 | 	.news-list-ul li:nth-child(2) .num{
105 | 		background-color: #fb9c0d;
106 | 	}
107 | 	.news-list-ul li:nth-child(3) .num{
108 | 		background-color: #15acd9;
109 | 	}
110 | </style>
111 | 


--------------------------------------------------------------------------------
/components/PageSolution.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div style="background-color: #eef5ff;padding: 6rem 0 10rem">
  3 | 		<section class="al-container">
  4 | 			<!-- <div class="flex justify-between mb-6">
  5 | 				<div>
  6 | 					<h2 class="md:text-4xl md:mb-2" style="color: #333;font-weight: 600;">行业解决方案</h2>
  7 | 					<p class="hidden md:block text-xs md:text-2xl" style="font-style: italic;color: #d6dbe4;">INDUSTRY
  8 | 						SOLUTIONS</p>
  9 | 				</div>
 10 | 				<div class="flex items-center">
 11 | 					<div class="bar"></div>
 12 | 					<p class="text-xs md:text-lg text-slate-400">先锋音讯16年品质保证，值得您信赖的伙伴</p>
 13 | 				</div>
 14 | 			</div> -->
 15 | 			<h2 style="text-align: center;font-size: 32px;font-weight: bold;color: #12205B;margin-bottom: 3rem;">行业解决方案</h2>
 16 | 			<div class="" style="height: 450px;">
 17 | 				<swiper :slidesPerView="4" :autoplay="{ delay: 5000,}" :loop="true" :navigation="true" :spaceBetween="15" :pagination="{
 18 | 				      clickable: true,
 19 | 				    }" :modules="modules" class="mySwiper">
 20 | 					<swiper-slide v-for="(item,index) in solutionSwiper" :key="index">
 21 | 						<div class="solution-slide" :style="{'backgroundImage':'url('+item.image+')'}">
 22 | 							<nuxt-link to="/">
 23 | 								<h3 class="text-3xl mb-4">{{item.title}}</h3>
 24 | 								<p class="text-base mb-6">{{item.keyword}}</p>
 25 | 							</nuxt-link>
 26 | 						</div>
 27 | 					</swiper-slide>
 28 | 				</swiper>
 29 | 			</div>
 30 | 		</section>
 31 | 	</div>
 32 | </template>
 33 | 
 34 | <script setup>
 35 | 	import {
 36 | 		Swiper,
 37 | 		SwiperSlide
 38 | 	} from "swiper/vue";
 39 | 	import "swiper/css";
 40 | 	import "swiper/css/pagination";
 41 | 	import "swiper/css/navigation";
 42 | 	import {
 43 | 		Autoplay,
 44 | 		Pagination,
 45 | 		Navigation
 46 | 	} from "swiper";
 47 | 	const modules = ref([Autoplay, Pagination, Navigation])
 48 | 	const {
 49 | 		data
 50 | 	} = defineProps(['data'])
 51 | 	const solutionSwiper = ref([{
 52 | 			title: '银行',
 53 | 			keyword: '国有银行、股份制银行、城商行',
 54 | 			desc: '国有银行、股份制银行、城商行',
 55 | 			image: 'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220513/a1_img_01.png'
 56 | 		},
 57 | 		{
 58 | 			title: '保险',
 59 | 			keyword: '人身险、意外险、保险中介、保险代理',
 60 | 			desc: '人身险、意外险、保险中介、保险代理',
 61 | 			image: 'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220513/a1_img_02.png'
 62 | 		},
 63 | 		{
 64 | 			title: '房地产',
 65 | 			keyword: '地产开发商、房产中介',
 66 | 			desc: '国有银行',
 67 | 			image: 'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220513/a1_img_03.png'
 68 | 		},
 69 | 		{
 70 | 			title: '证券',
 71 | 			keyword: '证券咨询公司',
 72 | 			desc: '证券咨询公司',
 73 | 			image: 'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220513/a1_img_04.png'
 74 | 		},
 75 | 		{
 76 | 			title: '汽车',
 77 | 			keyword: '汽车4S店、直营店',
 78 | 			desc: '国有银行',
 79 | 			image: 'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220627/car.png'
 80 | 		},
 81 | 	])
 82 | </script>
 83 | 
 84 | <style lang="scss" scoped>
 85 | 	.solution-slide {
 86 | 		background-size: 100% 100%;
 87 | 		height: 100%;
 88 | 		width: 100%;
 89 | 		position: relative;
 90 | 		border-radius: 5px;
 91 | 		overflow: hidden;
 92 | 		z-index: 1;
 93 | 		a{
 94 | 			display: flex;
 95 | 			justify-content: flex-end;
 96 | 			align-items: flex-start;
 97 | 			flex-direction: column;
 98 | 			height: 100%;
 99 | 			width: 100%;
100 | 			padding: 1rem;
101 | 			color: #fff;
102 | 			h3{
103 | 				font-weight: bold;
104 | 			}
105 | 		}
106 | 	}
107 | 
108 | 	.solution-slide a::before {
109 | 		display: block;
110 | 		content: "1111111111";
111 | 		width: 100%;
112 | 		height: 100%;
113 | 		background: rgba(4, 133, 226, 0.51);
114 | 		position: absolute;
115 | 		top: 0;
116 | 		left: 0;
117 | 		z-index: 4;
118 | 		transition: all .36s;
119 | 		opacity: 0;
120 | 	}
121 | </style>
122 | 


--------------------------------------------------------------------------------
/components/alone/NavBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<nav class="nav-bar">
  3 | 		<ul class="nav">
  4 | 			<li v-for="(nav,index) in data" :key="index">
  5 | 				<div class="nav-item">
  6 | 					<div class="nav-item-title">
  7 | 						<nuxt-link :class="{'active':routePath==nav.link}" :to="nav.link">
  8 | 							{{nav.name}}</nuxt-link>
  9 | 					</div>
 10 | 					<!-- 下拉菜单 -->
 11 | 					<div v-if="nav.children" class="dropdown-content">
 12 | 						<div class="dropdown-menu">
 13 | 							<div v-for="(navChildren,navChildrenIndex) in nav.children" class="menuItem"
 14 | 								:key="navChildrenIndex">
 15 | 								<nuxt-link :to="navChildren.link">{{navChildren.name}}</nuxt-link>
 16 | 							</div>
 17 | 						</div>
 18 | 					</div>
 19 | 				</div>
 20 | 			</li>
 21 | 		</ul>
 22 | 		<!-- 移动端 -->
 23 | 		<ul class="nav-m" :class="{'collapse':isCollapse}">
 24 | 			<li v-for="(nav,index) in data" :key="index">
 25 | 				<nuxt-link :class="{'active':routePath==nav.link}" :to="nav.link">{{nav.name}}
 26 | 				</nuxt-link>
 27 | 			</li>
 28 | 		</ul>
 29 | 		<button @click="isCollapse ? isCollapse=false : isCollapse=true">三</button>
 30 | 	</nav>
 31 | </template>
 32 | 
 33 | <script setup>
 34 | 	const route = useRoute()
 35 | 	const {
 36 | 		data
 37 | 	} = defineProps(['data'])
 38 | 	const routePath = ref('')
 39 | 	const isCollapse = ref(true)
 40 | 	watch(() => route.path, (path) => {
 41 | 		routePath.value = path
 42 | 	})
 43 | 	onMounted(() => {
 44 | 		routePath.value = route.path
 45 | 	})
 46 | </script>
 47 | 
 48 | <style lang="scss" scoped>
 49 | 	$header-height: 80px;
 50 | 
 51 | 	@media (max-width:576px) {
 52 | 		.nav-bar {
 53 | 			.nav {
 54 | 				display: none !important;
 55 | 			}
 56 | 
 57 | 			.nav-m {
 58 | 				display: block !important;
 59 | 			}
 60 | 
 61 | 			button {
 62 | 				display: block !important;
 63 | 			}
 64 | 		}
 65 | 	}
 66 | 
 67 | 	.nav-m {
 68 | 		position: absolute;
 69 | 		z-index: 99;
 70 | 		background-color: #fff;
 71 | 		left: 0;
 72 | 		right: 0;
 73 | 		top: $header-height;
 74 | 		padding: 1rem;
 75 | 		overflow: hidden;
 76 | 
 77 | 		a {
 78 | 			padding: 0.8rem 1rem;
 79 | 			display: inline-block;
 80 | 		}
 81 | 
 82 | 		.active {
 83 | 			color: $primary-color;
 84 | 		}
 85 | 	}
 86 | 
 87 | 	.nav-bar {
 88 | 		.nav-m {
 89 | 			display: none;
 90 | 		}
 91 | 
 92 | 		button {
 93 | 			display: none;
 94 | 		}
 95 | 	}
 96 | 
 97 | 	.nav {
 98 | 		position: relative;
 99 | 		display: flex;
100 | 		width: 100%;
101 | 		height: $header-height;
102 | 		line-height: $header-height;
103 | 
104 | 		.nav-item {
105 | 			position: relative;
106 | 			margin: 0 20px;
107 | 			cursor: pointer;
108 | 
109 | 			// transition: all 0.3s linear;
110 | 			a {
111 | 				display: block;
112 | 			}
113 | 
114 | 			.nav-item-title {
115 | 				position: relative;
116 | 				display: block;
117 | 				height: inherit;
118 | 				width: inherit;
119 | 
120 | 				.active {
121 | 					color: $primary-color;
122 | 					border-bottom: 2px solid $primary-color;
123 | 				}
124 | 
125 | 				&::before {
126 | 					content: "";
127 | 					position: absolute;
128 | 					bottom: 0;
129 | 					left: -5px;
130 | 					right: -5px;
131 | 					height: 2px;
132 | 					// width: 100%;
133 | 					background-color: $primary-color;
134 | 					transform: scale(0);
135 | 					transition: all 0.4s linear;
136 | 				}
137 | 
138 | 				&:hover {
139 | 					color: $primary-color;
140 | 
141 | 					&::before {
142 | 						transform: scale(1);
143 | 					}
144 | 				}
145 | 			}
146 | 
147 | 			&:hover .dropdown-content {
148 | 				height: 300px;
149 | 			}
150 | 		}
151 | 
152 | 		// 下拉菜单
153 | 		.dropdown-content {
154 | 			position: absolute;
155 | 			top: $header-height; // 为导航栏高度
156 | 			left: 0; // 设置为0, 不然会直接定位到父元素下方
157 | 			// width: 300px;
158 | 			height: 0; // 下拉初始高度
159 | 			overflow: hidden;
160 | 			transition: 0.6s;
161 | 
162 | 			.dropdown-menu {
163 | 				padding: 10px 8px 15px;
164 | 				color: #fff;
165 | 				background-color: #fff;
166 | 				border-radius: 4px;
167 | 
168 | 				.menuItem {
169 | 					width: 100%;
170 | 					height: 42px;
171 | 					white-space: nowrap;
172 | 					padding: 0 16px;
173 | 					font-size: 16px;
174 | 					line-height: 42px;
175 | 					color: #333;
176 | 					cursor: pointer;
177 | 					transition: all 0.3s ease-in-out;
178 | 					border-radius: 4px;
179 | 
180 | 					&:hover {
181 | 						background-color: #ccc;
182 | 					}
183 | 				}
184 | 			}
185 | 		}
186 | 	}
187 | </style>
188 | 


--------------------------------------------------------------------------------
/pages/solution/bank.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<div class="banner-top">
  4 | 			<div style="z-index: 1;position: absolute;top: 0;left: 0;width: 100%;">
  5 | 				<div class="al-container">
  6 | 					<h2 class="mt-5" style="font-weight: bold;font-size: 30px;color: #fff;">银行解决方案</h2>
  7 | 					<p style="color: aqua;margin: 3px 0;">VAA先锋音讯录音系统</p>
  8 | 					<p style="color: aqua;">助力银行提升客户业务办理效率</p>
  9 | 					<p class="mb-5 md:w-1/2" style="font-size: 14px;color: #fff;">
 10 | 						银行为了提高服务质量和纠纷取证，已经从窗口和大厅，发展到柜台，非现金业务柜台，贵宾室等。工作人员和客户坐在一张桌子上面对面谈话，想把这个对话内容录下来。由于经常发生纠纷而无法查证。如今，这种需求越来越强烈。
 11 | 					</p>
 12 | 					<nuxt-link class="yuyue-btn" to="/">预约演示</nuxt-link>
 13 | 				</div>
 14 | 			</div>
 15 | 		</div>
 16 | 		<div class="al-container text-slate-500">
 17 | 			您所在的位置：首页 / 解决方案
 18 | 		</div>
 19 | 		<div class="al-container">
 20 | 			<h2 class="section-title mt-28" style="font-size: 1.6rem;">银行客户面临的痛点</h2>
 21 | 			<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
 22 | 				<div class="td-box">
 23 | 					<img src="https://www.rcrai.com/Public/Uploads/uploadfile/images/20220512/628308efd6b3a.svg" alt="">
 24 | 					<h3 class="title">缺乏个性化营销策略</h3>
 25 | 					<p>保险机构已经服务过的客户以及在过去的营销活动中积累的存量客户非常多。但与潜在客户进行交流的时候，面临的关键问题是对客户的认知不够，导致无法实现更加个性化的营销策略，线索浪费率高。</p>
 26 | 				</div>
 27 | 				<div class="td-box">
 28 | 					<img src="https://www.rcrai.com/Public/Uploads/uploadfile/images/20220512/628308efd6da2.svg" alt="">
 29 | 					<h3 class="title">缺乏个性化营销策略</h3>
 30 | 					<p>银行机构积累的存量客户非常多，但由于对客户的认知不够，客户分析不够精准，无法制定有效的对客策略进行精准营销，导致客户转化低。</p>
 31 | 				</div>
 32 | 				<div class="td-box">
 33 | 					<img src="https://www.rcrai.com/Public/Uploads/uploadfile/images/20220512/628308efd6f6d.svg" alt="">
 34 | 					<h3 class="title">缺乏个性化营销策略</h3>
 35 | 					<p>银行机构积累的存量客户非常多，但由于对客户的认知不够，客户分析不够精准，无法制定有效的对客策略进行精准营销，导致客户转化低。</p>
 36 | 				</div>
 37 | 				<div class="td-box">
 38 | 					<img src="https://www.rcrai.com/Public/Uploads/uploadfile/images/20220512/628308efd7128.svg" alt="">
 39 | 					<h3 class="title">缺乏个性化营销策略</h3>
 40 | 					<p>银行机构积累的存量客户非常多，但由于对客户的认知不够，客户分析不够精准，无法制定有效的对客策略进行精准营销，导致客户转化低。</p>
 41 | 				</div>
 42 | 			</div>
 43 | 		</div>
 44 | 		<div class="bg-white mt-32">
 45 | 			<div class="al-container">
 46 | 				<h2 class="section-title mt-20" style="font-size: 2rem;">VAA先锋音讯的解决方案</h2>
 47 | 				<div class="grid grid-cols-1 md:grid-cols-2 gap-20 mb-32">
 48 | 					<div class="basis-1/2">
 49 | 						<div class="sec-top">
 50 | 							<h3 class="title">强大的中央集成软件</h3>
 51 | 							<p>业务员的每一通电话都会全自动录音保存</p>
 52 | 						</div>
 53 | 						<div class="flex1 mt-8">
 54 | 							<div class="flex items-center w-28">
 55 | 								<img width="30px" src="https://www.rcrai.com/Public/Uploads/uploadfile/images/20220704/C1_icon_07-483.png" alt="">
 56 | 								<p style="color: #17E5E0;"> 核心优势</p>
 57 | 							</div>
 58 | 							<div class="flex items-center1 ml-2" style="margin-top: 15px;color: #666;">
 59 | 								<p>增强企业核心竞争力，提升企业的品牌影响力。呼叫中心系统概述呼叫中心系统将语音查询、自助服务、人工服务、智能分配等紧密结合，把保险业企业内部资源、 潜在客户群体等资源通过网络进行整合，建立起保险业务流程中各个环节的快速反应机制，实现资源的统一分配与利用。系统为一个开放的对话平台，作为企业与客 户之间沟通的工具，客服人员、销售人员与客户可进 销售代表可通过此平台接受公司的调度分配，从而更加有效地进行客户拜访。</p>
 60 | 							</div>
 61 | 						</div>
 62 | 					</div>
 63 | 					<div>
 64 | 						<img src="http://cdn.xfrec.com/vaa/client-line.png" alt="">
 65 | 					</div>
 66 | 				</div>
 67 | 			</div>
 68 | 		</div>
 69 | 		<div class="mt-32">
 70 | 			<div class="al-container">
 71 | 				<!-- <h2 class="section-title mt-20" style="font-size: 2rem;">VAA先锋音讯的解决方案</h2> -->
 72 | 				<div class="grid grid-cols-1 md:grid-cols-2 gap-20 md:mb-32">
 73 | 					<div>
 74 | 						<img src="http://cdn.xfrec.com/vaa/vaa-call.png" alt="">
 75 | 					</div>
 76 | 					<div class="">
 77 | 						<div class="sec-top">
 78 | 							<h3 class="title">完善的录音管理系统</h3>
 79 | 							<p>业务员的每一通电话都会全自动录音保存</p>
 80 | 						</div>
 81 | 						<div class="flex1 mt-8">
 82 | 							<div class="flex items-center w-28">
 83 | 								<img width="30px" src="https://www.rcrai.com/Public/Uploads/uploadfile/images/20220704/C1_icon_07-483.png" alt="">
 84 | 								<p style="color: #17E5E0;"> 核心优势</p>
 85 | 							</div>
 86 | 							<div class="flex items-center1 ml-2" style="margin-top: 15px;color: #666;">
 87 | 								<p>增强企业核心竞争力，提升企业的品牌影响力。呼叫中心系统概述呼叫中心系统将语音查询、自助服务、人工服务、智能分配等紧密结合，把保险业企业内部资源、 潜在客户群体等资源通过网络进行整合，建立起保险业务流程中各个环节的快速反应机制，实现资源的统一分配与利用。系统为一个开放的对话平台，作为企业与客 户之间沟通的工具，客服人员、销售人员与客户可进 销售代表可通过此平台接受公司的调度分配，从而更加有效地进行客户拜访。</p>
 88 | 							</div>
 89 | 						</div>
 90 | 					</div>
 91 | 				</div>
 92 | 			</div>
 93 | 		</div>
 94 | 	</div>
 95 | </template>
 96 | 
 97 | <script>
 98 | </script>
 99 | 
100 | <style lang="scss">
101 | 	.banner-top {
102 | 		height: 300px;
103 | 		background-image: url('http://cdn.gold404.cn/nuxt/bank-bg.png');
104 | 		background-size: 100% 100%;
105 | 		position: relative;
106 | 		&::before {
107 | 			z-index: 1;
108 | 			content: '';
109 | 			width: 100%;
110 | 			height: 100%;
111 | 			background: linear-gradient(89.96deg, #12205B 25.8%, rgba(18, 32, 91, 0) 95.33%);
112 | 			position: absolute;
113 | 			top: 0;
114 | 			left: 0;
115 | 		}
116 | 	}
117 | 
118 | 	.yuyue-btn {
119 | 		background-color: #17e5e0;
120 | 		color: #12205B;
121 | 		padding: 5px;
122 | 		padding: 8px 25px;
123 | 		border-radius: 20px;
124 | 	}
125 | 
126 | 	.td-box {
127 | 		background-color: #fff;
128 | 		padding:3rem 2rem;
129 | 		box-shadow: 0px 4px 14px 0px #0b28741a;
130 | 		overflow: hidden;
131 | 		color: #6F748A;
132 | 		line-height: 1.75;
133 | 		border-radius: 5px;
134 | 
135 | 		.title {
136 | 			color: #12205B;
137 | 			font-weight: bold;
138 | 			font-size: 20px;
139 | 			margin: 1rem 0;
140 | 		}
141 | 	}
142 | 	.sec-top{
143 | 		position: relative;
144 | 		padding-left: 20px;
145 | 		color: #888;
146 | 		font-size: 14px;
147 | 		.title{
148 | 			color: #12205B;
149 | 			font-weight: bold;
150 | 			font-size: 1.6rem;
151 | 			margin-bottom: 5px;
152 | 		}
153 | 		&:before{
154 | 			content: '';
155 | 			background-color: #17E5E0;
156 | 			display: block;
157 | 			width: 10px;
158 | 			height: 4rem;
159 | 			border-radius: 50px;
160 | 			position: absolute;
161 | 			left: 0;
162 | 			top: 50%;
163 | 			transform: translateY(-50%);
164 | 		}
165 | 	}
166 | </style>
167 | 


--------------------------------------------------------------------------------
/pages/example/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="">
 3 | 		<PageTop title="用户案例" />
 4 | 		<div class="al-container">
 5 | 			<div class="text-slate-500">
 6 | 				您所在的位置：首页 / 用户案例
 7 | 			</div>
 8 | 			<div class="mt-6">
 9 | 				<div class="mb-10 md:mb-16" v-for="(pItem,pIndex) in data" :key="pIndex">
10 | 					<h3 class="example-title" style="text-align: center;">{{pItem.name}}</h3>
11 | 					<ul class="grid grid-cols-3 md:grid-cols-6 gap-4">
12 | 						<li class="shadow-lg rounded-md mb-4" v-for="(item,index) in pItem.children" :key="index">
13 | 							<img v-if="item.logo" class="w-full" :src="item.logo" :title="item.name" :alt="item.name">
14 | 							<p v-else>{{item.name}}</p>
15 | 						</li>
16 | 					</ul>
17 | 				</div>
18 | 			</div>
19 | 		</div>
20 | 	</div>
21 | </template>
22 | 
23 | <script setup>
24 | 	const data = ref([
25 | 		{
26 | 			'name':'银行',
27 | 			'children':[
28 | 				{name:'中国银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.1gongxing.png'},
29 | 				{name:'中国人民银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220705/zhaoxingnew.png'},
30 | 				{name:'中国工商银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.1gongxing.png'},
31 | 				{name:'中国建设银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.4shanghaiyinxing.png'},
32 | 				{name:'中国交通银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.5weizhongyinxing.png'},
33 | 				{name:'中国招商银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.6renbaocaixian.png'},
34 | 				{name:'中国农业银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/2.1taipingrenshou.png'},
35 | 				{name:'中国民生银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/2.1taikangrenshou.png'},
36 | 				{name:'中国商业银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.1gongxing.png'},
37 | 				{name:'光大银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/2.4daduhuirenshou.png'},
38 | 				{name:'中信银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.3zhongxinyinxing.png'},
39 | 				{name:'江苏银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220705/wankenew.png'},
40 | 				{name:'广东发展银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220928/3.2zhaoshangshekou.png'},
41 | 				{name:'长沙农村商业银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220929/pastdonghang.png'},
42 | 				{name:'韩国国民银行银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220928/5.5niwodai.png'},
43 | 			],
44 | 		},
45 | 		{
46 | 			'name':'证券',
47 | 			'children':[
48 | 				{name:'中国银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.1gongxing.png'},
49 | 				{name:'中国人民银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220705/zhaoxingnew.png'},
50 | 				{name:'中国工商银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.1gongxing.png'},
51 | 				{name:'中国建设银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.4shanghaiyinxing.png'},
52 | 				{name:'中国交通银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.5weizhongyinxing.png'},
53 | 				{name:'中国招商银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.6renbaocaixian.png'},
54 | 				{name:'中国农业银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/2.1taipingrenshou.png'},
55 | 				{name:'中国民生银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/2.1taikangrenshou.png'},
56 | 				{name:'中国商业银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.1gongxing.png'},
57 | 				{name:'光大银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/2.4daduhuirenshou.png'},
58 | 				{name:'中信银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.3zhongxinyinxing.png'},
59 | 				{name:'江苏银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220705/wankenew.png'},
60 | 				{name:'广东发展银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220928/3.2zhaoshangshekou.png'},
61 | 				{name:'长沙农村商业银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220929/pastdonghang.png'},
62 | 				{name:'韩国国民银行银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220928/5.5niwodai.png'},
63 | 			],
64 | 		},
65 | 		{
66 | 			'name':'保险行业',
67 | 			'children':[
68 | 				{name:'中国银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.1gongxing.png'},
69 | 				{name:'中国人民银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220705/zhaoxingnew.png'},
70 | 				{name:'中国工商银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.1gongxing.png'},
71 | 				{name:'中国建设银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.4shanghaiyinxing.png'},
72 | 				{name:'中国交通银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.5weizhongyinxing.png'},
73 | 				{name:'中国招商银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.6renbaocaixian.png'},
74 | 				{name:'中国农业银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/2.1taipingrenshou.png'},
75 | 				{name:'中国民生银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/2.1taikangrenshou.png'},
76 | 				{name:'中国商业银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.1gongxing.png'},
77 | 				{name:'光大银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/2.4daduhuirenshou.png'},
78 | 				{name:'中信银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220706/1.3zhongxinyinxing.png'},
79 | 				{name:'江苏银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220705/wankenew.png'},
80 | 				{name:'广东发展银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220928/3.2zhaoshangshekou.png'},
81 | 				{name:'长沙农村商业银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220929/pastdonghang.png'},
82 | 				{name:'韩国国民银行银行',logo:'https://www.rcrai.com/Public/Uploads/uploadfile/images/20220928/5.5niwodai.png'},
83 | 			],
84 | 		}
85 | 	])
86 | </script>
87 | 
88 | <style lang="scss" scoped>
89 | 	.example-ul{
90 | 		display: flex;
91 | 	}
92 | 	.example-title{
93 | 		text-align: center;
94 | 		font-size: 28px;
95 | 		font-weight: bold;
96 | 		color: #12205B;
97 | 		margin-bottom: 1rem;
98 | 	}
99 | </style>


--------------------------------------------------------------------------------