1
This commit is contained in:
@ -1,21 +1,54 @@
|
||||
<template>
|
||||
<div id="footer" class="container-fluid">
|
||||
<div class="logo">
|
||||
<!-- <img src="@/assets/img/logo_black.png" /> -->
|
||||
<div class="top">
|
||||
</div>
|
||||
<p class="title">泰阿新材（深圳）有限公司</p>
|
||||
<div class="footer-chent">
|
||||
<div class="logoo">
|
||||
<div class="filing2">
|
||||
<div class="qucode" >
|
||||
<img class="rq" v-if="qucode1" src="@/assets/img/xiaochengxu.png" alt="" />
|
||||
<img class="ys3" v-on:mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" src="@/assets/img/m4.png" alt="" />
|
||||
</div>
|
||||
<div class="qucode" >
|
||||
<img class="rq1" v-if="qucode2" src="@/assets/img/gzh.png" alt="" />
|
||||
<img class="ys4" v-on:mouseenter="handleMouseEnter2" @mouseleave="handleMouseLeave2" src="@/assets/img/m1.png" alt="" />
|
||||
</div>
|
||||
<div class="qucode" >
|
||||
<img class="rq1" v-if="qucode3" src="@/assets/img/hongshu.png" alt="" />
|
||||
<img class="ys4" v-on:mouseenter="handleMouseEnter3" @mouseleave="handleMouseLeave3" src="@/assets/img/m2.png" alt="" />
|
||||
</div>
|
||||
<div class="qucode" >
|
||||
<img class="rq1" v-if="qucode4" src="@/assets/img/dygzh.png" alt="" />
|
||||
<img class="ys4" v-on:mouseenter="handleMouseEnter4" @mouseleave="handleMouseLeave4" src="@/assets/img/m3.png" alt="" />
|
||||
</div>
|
||||
<div class="qucode" >
|
||||
<img class="rq1" v-if="qucode5" src="@/assets/img/weiboh.png" alt="" />
|
||||
<img class="ys4" v-on:mouseenter="handleMouseEnter5" @mouseleave="handleMouseLeave5" src="@/assets/img/m5.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<img class="lo" src="@/assets/img/wagoo-log.png" alt="" />
|
||||
</div>
|
||||
<p class="x">微信抖音搜索或扫码关注Wagoo,第一时间获取福利及Wagoo相关咨询。</p>
|
||||
<p class="xx"></p>
|
||||
<div class="filing">
|
||||
<span class="x1">沪ICP备2024103050号</span>
|
||||
<img class="ys1" src="@/assets/img/ga.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="logo">
|
||||
</div>
|
||||
<p class="title">帮宠到家（上海）有限公司</p>
|
||||
<p class="address_tel_fax">
|
||||
</p><p>地址：{{ address }}</p>
|
||||
<!-- <p>QQ群：<a style="color:#fff" target="_blank" href="#">{{ qqgroup }}</a></p> -->
|
||||
<p class="email_wx">
|
||||
<!-- </p><p>博客：<a :href='blog + "neveryu/"' style="color:#fff">{{ blog }}</a></p> -->
|
||||
</p><p>电话：755-23612502</p>
|
||||
<p>公司邮箱：mk01@texcsz.top</p>
|
||||
<p class="copy">Copyright © 2023 - Now {{ company }}</p>
|
||||
<p class="copy">Copyright © 2023 - Now {{ company }}</p> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Footer">
|
||||
import { reactive, ref } from 'vue';
|
||||
const address = import.meta.env.VITE_APP_ADDRESS;
|
||||
const phone = import.meta.env.VITE_APP_PHONE;
|
||||
const email = import.meta.env.VITE_APP_EMAIL;
|
||||
@ -23,6 +56,47 @@
|
||||
const company = import.meta.env.VITE_APP_COMPANYNAME;
|
||||
const blog = import.meta.env.VITE_APP_BLOG;
|
||||
const qqgroup = import.meta.env.VITE_APP_QQGROUP;
|
||||
|
||||
const qucode1 = ref(false);
|
||||
const qucode2 = ref(false);
|
||||
const qucode3 = ref(false);
|
||||
const qucode4 = ref(false);
|
||||
const qucode5 = ref(false);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
qucode1.value = true
|
||||
};
|
||||
const handleMouseLeave = () => {
|
||||
qucode1.value = false
|
||||
};
|
||||
|
||||
const handleMouseEnter2 = () => {
|
||||
qucode2.value = true
|
||||
};
|
||||
const handleMouseLeave2 = () => {
|
||||
qucode2.value = false
|
||||
};
|
||||
const handleMouseEnter3 = () => {
|
||||
qucode3.value = true
|
||||
};
|
||||
const handleMouseLeave3 = () => {
|
||||
qucode3.value = false
|
||||
};
|
||||
const handleMouseEnter4 = () => {
|
||||
qucode4.value = true
|
||||
};
|
||||
const handleMouseLeave4 = () => {
|
||||
qucode4.value = false
|
||||
};
|
||||
const handleMouseEnter5 = () => {
|
||||
qucode5.value = true
|
||||
};
|
||||
const handleMouseLeave5 = () => {
|
||||
qucode5.value = false
|
||||
};
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -30,10 +104,121 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background: #474747;
|
||||
background: #FF19A0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
/* text-align: center; */
|
||||
/* padding: 30px; */
|
||||
/* padding-right: 100px; */
|
||||
}
|
||||
.container-fluid{
|
||||
padding: 0;
|
||||
}
|
||||
.top{
|
||||
height:62px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
.footer-chent{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.qucode{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.rq{
|
||||
position: absolute;
|
||||
top: -124px;
|
||||
left: -28px;
|
||||
z-index: 99;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
/* border: 1px solid #000; */
|
||||
}
|
||||
.rq1{
|
||||
position: absolute;
|
||||
top: -124px;
|
||||
left: -4px;
|
||||
z-index: 99;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
/* border: 1px solid #000; */
|
||||
}
|
||||
.rq2{
|
||||
position: absolute;
|
||||
top: -124px;
|
||||
left: -4px;
|
||||
z-index: 99;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
/* border: 1px solid #000; */
|
||||
}
|
||||
.rq3{
|
||||
position: absolute;
|
||||
top: -124px;
|
||||
left: -4px;
|
||||
z-index: 99;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
/* border: 1px solid #000; */
|
||||
}
|
||||
.x{
|
||||
font-family: PingFangSC;
|
||||
font-size: 24px;
|
||||
}
|
||||
.xx{
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
}
|
||||
.x1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 24px;
|
||||
}
|
||||
.lo{
|
||||
width: 45px;
|
||||
height:25px;
|
||||
}
|
||||
.logoo{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.filing{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.filing2{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin: 80px 0 30px 0;
|
||||
}
|
||||
.ys1{
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.ys2{
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
margin-left:20px;
|
||||
}
|
||||
.ys3{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
cursor:pointer
|
||||
/* margin-left:20px; */
|
||||
}
|
||||
.ys4{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-left:20px;
|
||||
cursor:pointer
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
width: 95px;
|
||||
@ -63,6 +248,43 @@
|
||||
margin: 50px 0 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.logoo{
|
||||
display: block;
|
||||
/* justify-content: space-between;
|
||||
align-items: center; */
|
||||
}
|
||||
.lo{
|
||||
width: 90px;
|
||||
height: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.x{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
margin-top:20px;
|
||||
}
|
||||
.x1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
margin-bottom:20px;
|
||||
|
||||
}
|
||||
.ys1{
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
margin: 0 0 20px 5px;
|
||||
}
|
||||
.top {
|
||||
height: 41px;
|
||||
width: 100%;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 997px) {
|
||||
.title {
|
||||
font-size: 20px;
|
||||
|
||||
@ -8,13 +8,11 @@
|
||||
import { ref } from 'vue'
|
||||
const flag = ref(false)
|
||||
function GoTop() {
|
||||
;(function smoothscroll() {
|
||||
var currentScroll =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
if (currentScroll > 0) {
|
||||
window.requestAnimationFrame(smoothscroll)
|
||||
window.scrollTo(0, currentScroll - currentScroll / 10)
|
||||
}
|
||||
(function smoothscroll() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth' // 平滑滚动效果
|
||||
});
|
||||
})()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<!-- 头部整体盒子 -->
|
||||
<div id="header" class="container-fuild">
|
||||
|
||||
<!-- 头部顶部 -->
|
||||
<!--
|
||||
<div class="container-fuild header-top hidden-xs">
|
||||
@ -28,14 +29,16 @@
|
||||
</div>
|
||||
-->
|
||||
<!-- 电脑导航 -->
|
||||
<div class="container header-nav hidden-xs" style="display: flex;justify-content: space-between;">
|
||||
<div class="container header-nav hidden-xs" >
|
||||
|
||||
<!-- 导航logo -->
|
||||
<div class="header-nav-logo">
|
||||
<!-- <div class="header-nav-logo">
|
||||
<img src="@/assets/img/logo_black.png" />
|
||||
</div>
|
||||
<h1 style="line-height: 70px;">凝聚创新科技，铸造军工力量</h1>
|
||||
<h1 style="line-height: 70px;">凝聚创新科技，铸造军工力量</h1> -->
|
||||
<!-- 导航内容 -->
|
||||
<ul class="header-nav-wrapper" style="margin-left: 25%;">
|
||||
<ul class="header-nav-wrapper" style="margin-left:11%;">
|
||||
<img class="homeimg" src="@/assets/img/wagoo-log.png" alt="" />
|
||||
<li
|
||||
v-for="(item, index) in navList"
|
||||
:key="index"
|
||||
@ -60,23 +63,25 @@
|
||||
</div>
|
||||
<!-- 手机导航 -->
|
||||
<div class="container-fuild header-nav-m visible-xs">
|
||||
<div class="header-nav-m-logo">
|
||||
<img class="homeimg2" src="@/assets/img/wagoo-log.png" alt="" />
|
||||
<!-- <div class="header-nav-m-logo">
|
||||
<img
|
||||
class="center-block"
|
||||
src="@/assets/img/logo_black.png"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 导航栏 -->
|
||||
<div class="header-nav-m-menu text-center">
|
||||
{{ menuName }}
|
||||
<!-- {{ menuName }} -->
|
||||
<div
|
||||
class="header-nav-m-menu-wrapper"
|
||||
data-toggle="collapse"
|
||||
data-target="#menu"
|
||||
@click="menuClick"
|
||||
>
|
||||
<span :class="menuClass"></span>
|
||||
<img class="navigation" src="@/assets/img/dh.png" alt="" />
|
||||
<!-- <span :class="menuClass"></span> -->
|
||||
</div>
|
||||
<!-- 导航内容 -->
|
||||
<ul id="menu" class="collapse header-nav-m-wrapper">
|
||||
@ -95,6 +100,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -119,6 +125,7 @@
|
||||
// name: '软件产品',
|
||||
// path: '/software',
|
||||
// children: [
|
||||
|
||||
// {
|
||||
// name: '智能小镇管理系统',
|
||||
// path: '/software/smartTown',
|
||||
@ -130,32 +137,53 @@
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
name: '相关服务',
|
||||
name: '宠物服务',
|
||||
path: '/service',
|
||||
children: [],
|
||||
},
|
||||
// {
|
||||
// name: '新闻动态',
|
||||
// path: '/newsinformation',
|
||||
// children: [],
|
||||
// },
|
||||
{
|
||||
name: '公司介绍',
|
||||
name: '服务案列',
|
||||
path: '/newsinformation',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: '服务项目',
|
||||
path: '/companyintroduction',
|
||||
children: [],
|
||||
},
|
||||
// {
|
||||
// name: '工作机会',
|
||||
// path: '/jobchance',
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// name: '联系我们',
|
||||
// path: '/contactus',
|
||||
// children: [],
|
||||
// },
|
||||
{
|
||||
name: '活动风采',
|
||||
path: '/jobchance',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: '加入我们',
|
||||
path: '/contactus',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: '加盟咨询',
|
||||
path: '/franchise',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: '问题与解答',
|
||||
path: '/problem',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: '客户与伙伴',
|
||||
path: '/customer',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: '关于我们',
|
||||
path: '/WagooCat',
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
function navClick(index, name) {
|
||||
console.log(index,name,'??')
|
||||
navIndex.value = index;
|
||||
sessionStorage.setItem('navIndex', index);
|
||||
menuName.value = name;
|
||||
@ -172,10 +200,15 @@
|
||||
<style scoped>
|
||||
/* 顶部 */
|
||||
#header {
|
||||
background: #f4f4f4;
|
||||
background: #FF19A0;
|
||||
transition: all ease 0.6s;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
#header .header-top {
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
@ -183,6 +216,26 @@
|
||||
line-height: 50px;
|
||||
background: #474747;
|
||||
}
|
||||
.homeimg{
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left:100px;
|
||||
width: 60px;
|
||||
height:36px;
|
||||
}
|
||||
|
||||
.homeimg2{
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left:55px;
|
||||
width: 60px;
|
||||
height:30px;
|
||||
|
||||
}
|
||||
.navigation{
|
||||
width:35px;
|
||||
height:45px;
|
||||
}
|
||||
|
||||
/* 顶部的图标 */
|
||||
#header .header-top span {
|
||||
@ -191,7 +244,7 @@
|
||||
|
||||
/* 导航栏 */
|
||||
#header .header-nav {
|
||||
height: 110px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/* 导航栏logo */
|
||||
@ -221,24 +274,25 @@
|
||||
|
||||
#header .header-nav .header-nav-wrapper {
|
||||
line-height: 110px;
|
||||
float: right;
|
||||
/* float: right; */
|
||||
margin: 0;
|
||||
max-width: 800px;
|
||||
max-width:920px;
|
||||
}
|
||||
|
||||
/* 导航栏 每个导航 */
|
||||
#header .header-nav .header-nav-wrapper > li {
|
||||
float: left;
|
||||
margin: 0 15px;
|
||||
height: 55px;
|
||||
margin: -25px 15px 0 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 导航栏 每个导航下面的 a 链接 */
|
||||
#header .header-nav .header-nav-wrapper > li > a {
|
||||
color: #000;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
padding: 15px 0;
|
||||
font-weight: 400;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -252,7 +306,7 @@
|
||||
height: 2px;
|
||||
opacity: 0;
|
||||
transition: all 0.6s ease;
|
||||
background-color: #1e73be;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 导航栏 每个导航下面的 a 链接的右侧小三角 */
|
||||
@ -263,7 +317,8 @@
|
||||
|
||||
/* 导航栏 每个导航下面的 a 链接 鼠标滑上去的样式 */
|
||||
#header .header-nav .header-nav-wrapper > li > a:hover {
|
||||
color: #1e73be;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -281,9 +336,10 @@
|
||||
|
||||
/* 导航栏 每个导航下面的 a 链接 鼠标点击后的样式 */
|
||||
#header .header-nav .header-nav-wrapper > li.active > a {
|
||||
color: #1e73be;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid #1e73be;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
|
||||
/* 导航栏 每个导航下面的二级导航容器 */
|
||||
@ -349,7 +405,7 @@
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
line-height: 50px;
|
||||
background: #474747;
|
||||
/* background: #474747; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -372,7 +428,7 @@
|
||||
top: 50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #474747;
|
||||
background: #fff;
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
@ -380,14 +436,15 @@
|
||||
#header .header-nav-m .header-nav-m-wrapper > li {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 导航栏 每个导航下面的 a 链接 */
|
||||
#header .header-nav-m .header-nav-m-wrapper > li > a {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #3D3D3D;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC;
|
||||
/* font-weight: bold; */
|
||||
padding: 15px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createRouter } from '@/router'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
/* swiper */
|
||||
// import 'swiper/swiper.min.css'
|
||||
@ -19,6 +21,6 @@ import App from './App.vue'
|
||||
|
||||
const router = createRouter()
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(ElementPlus)
|
||||
app.use(router).mount('#app')
|
||||
|
||||
|
||||
@ -27,46 +27,46 @@ const routes = [
|
||||
title: '首页'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/software',
|
||||
name: 'software',
|
||||
component: () => import('@/view/Software.vue'),
|
||||
redirect: '/software/smartTown',
|
||||
meta: {
|
||||
title: '软件产品'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/software/smartTown',
|
||||
name: 'smartTown',
|
||||
component: () => import('@/view/Software_smartTown.vue'),
|
||||
meta: {
|
||||
title: '软件产品丨智能小镇管理系统'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/software/bigData',
|
||||
name: 'bigData',
|
||||
component: () => import('@/view/Software_bigData.vue'),
|
||||
meta: {
|
||||
title: '软件产品丨大数据管理系统'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/software',
|
||||
// name: 'software',
|
||||
// component: () => import('@/view/Software.vue'),
|
||||
// redirect: '/software/smartTown',
|
||||
// meta: {
|
||||
// title: '软件产品'
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: '/software/smartTown',
|
||||
// name: 'smartTown',
|
||||
// component: () => import('@/view/Software_smartTown.vue'),
|
||||
// meta: {
|
||||
// title: '软件产品丨智能小镇管理系统'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// path: '/software/bigData',
|
||||
// name: 'bigData',
|
||||
// component: () => import('@/view/Software_bigData.vue'),
|
||||
// meta: {
|
||||
// title: '软件产品丨大数据管理系统'
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
path: '/service',
|
||||
name: 'service',
|
||||
component: () => import('@/view/Service.vue'),
|
||||
props: true,
|
||||
meta: {
|
||||
title: '相关服务'
|
||||
title: '宠物服务'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/servicedetail',
|
||||
name: 'serviceDetail',
|
||||
component: () => import('@/view/ServiceDetail.vue'),
|
||||
path: '/franchise',
|
||||
name: 'franchise',
|
||||
component: () => import('@/view/franchise.vue'),
|
||||
props: true,
|
||||
meta: {
|
||||
title: '相关服务-详情'
|
||||
@ -79,6 +79,30 @@ const routes = [
|
||||
meta: {
|
||||
title: '新闻动态'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/problem',
|
||||
name: 'problem',
|
||||
component: () => import('@/view/problem.vue'),
|
||||
meta: {
|
||||
title: '问题与解答'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/customer',
|
||||
name: 'customer',
|
||||
component: () => import('@/view/customer.vue'),
|
||||
meta: {
|
||||
title: '客户与伙伴'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/WagooCat',
|
||||
name: 'WagooCat',
|
||||
component: () => import('@/view/WagooCat.vue'),
|
||||
meta: {
|
||||
title: '客户与伙伴'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/companyintroduction',
|
||||
|
||||
@ -1,46 +1,502 @@
|
||||
<template>
|
||||
<div id="CompanyIntroduction">
|
||||
<div class="banner container-fuild text-center">关于我们</div>
|
||||
<div class="container">
|
||||
<div class="CompanyIntroduction-container row">
|
||||
<div class="col-md-6 col-sm-12 col-xs-12 wow zoomIn">
|
||||
<!-- <img
|
||||
class="center-block img-responsive"
|
||||
src="@/assets/img/about_img.png"
|
||||
/> -->
|
||||
<img
|
||||
class="center-block img-responsive"
|
||||
src="@/assets/img/about_img1.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12 col-xs-12">
|
||||
<h3>泰阿新材（深圳）有限公司</h3>
|
||||
<p class=".text-justify">
|
||||
泰阿新材（深圳）有限公司成立于2023年，位于广东省深圳市福田区，是一家专业从事计算机、
|
||||
通信、电子设备制造等相关材料，集技术、研发、生产、销售为一体的科技型企业。
|
||||
</p>
|
||||
<p class=".text-justify">
|
||||
公司拥有在电子通信领域具有资深经验的技术团队，具备产品的方案设计，技术研发，生产和
|
||||
全系统交付能力，我们致力于为客户提供TEC温控 、短波通讯设备、电力等核心技术及产品解
|
||||
决方案，目前已为多家军工企业、科研机构、高校、研究所等提供优质的产品和服务。公司秉承
|
||||
品质、安全为先，客户需求至上的理念，为客户创造更多价值。
|
||||
</p>
|
||||
<img class="bd3" src="@/assets/img/bd3.png" alt="" />
|
||||
<div class="title">
|
||||
<div class="title2">
|
||||
<div v-for="(item, index) in navList"
|
||||
:key="index" class="title-item">
|
||||
<span :class="[itemValu == item.name ? 'j1' : 'j' ]" @click="titlecli(item)">{{item.name}}</span>
|
||||
<div v-if="itemValu == item.name" class="h" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 精品洗护体验4大项 -->
|
||||
<div class="box" v-if="itemValu == '精品洗护体验4大项' ">
|
||||
<div class="care">
|
||||
<img class="jp1" src="@/assets/img/jp1.png" alt="" />
|
||||
<div class="xh">
|
||||
<p class="p1">Step1预检护航</p>
|
||||
<p class="p">云端接宠</p>
|
||||
<p class="p">健康体检</p>
|
||||
<p class="p">云端建档</p>
|
||||
<p class="p">1对1方案定制</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<img class="jp1" src="@/assets/img/jp2.png" alt="" />
|
||||
<div class="xh">
|
||||
<p class="p1">Step2预检护航</p>
|
||||
<p class="p">赛级毛发精修</p>
|
||||
<p class="p">耳道深度清洁</p>
|
||||
<p class="p">无感腺体护理</p>
|
||||
<p class="p">双效清洁矩阵</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<img class="jp1" src="@/assets/img/jp3.png" alt="" />
|
||||
<div class="xh">
|
||||
<p class="p1">Step3预检护航</p>
|
||||
<p class="p">纳米级吸水</p>
|
||||
<p class="p">低噪扫风</p>
|
||||
<p class="p">恒温隧道烘干</p>
|
||||
<p class="p">毛流定型</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<img class="jp1" src="@/assets/img/jp4.png" alt="" />
|
||||
<div class="xh">
|
||||
<p class="p1">Step4预检护航</p>
|
||||
<p class="p">全身镜检</p>
|
||||
<p class="p">分子级留香</p>
|
||||
<p class="p">工具灭菌</p>
|
||||
<p class="p">健康护照</p>
|
||||
<p class="p">全车终末消毒</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 洗护服务6阶段 -->
|
||||
<div class="box" v-if="itemValu == '洗护服务6阶段'">
|
||||
<div class="care">
|
||||
<img class="care1" src="@/assets/img/care1.png" alt="" />
|
||||
<div>
|
||||
<p class="p1">Step1接宠阶段</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<img class="care2" src="@/assets/img/care2.png" alt="" />
|
||||
<div>
|
||||
<p class="p1">Step2洗护阶段</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<img class="care3" src="@/assets/img/care3.png" alt="" />
|
||||
<div>
|
||||
<p class="p1">Step3干毛阶段</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<img class="care4" src="@/assets/img/care4.png" alt="" />
|
||||
<div>
|
||||
<p class="p1">Step4检查阶段</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<img class="care5" src="@/assets/img/care5.png" alt="" />
|
||||
<div>
|
||||
<p class="p1">Step5交宠阶段</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<img class="care6" src="@/assets/img/care6.png" alt="" />
|
||||
<div>
|
||||
<p class="p1">Step6设备清洁</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 洗护流程30步 -->
|
||||
<div v-if="itemValu == '洗护流程30步'">
|
||||
<div class="outerLayer">
|
||||
<div class="receiving">
|
||||
<p class="jd">1.接宠阶段</p>
|
||||
</div>
|
||||
<div class="receive">
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/tx1.png" alt="" />
|
||||
<p class="sm">上门接宠</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/tx2.png" alt="" />
|
||||
<p class="sm">洗前预检</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/tx3.png" alt="" />
|
||||
<p class="sm">洗前称重</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outerLayer">
|
||||
<div class="receiving">
|
||||
<p class="jd">2.洗护阶段</p>
|
||||
</div>
|
||||
<div class="receive">
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx1.png" alt="" />
|
||||
<p class="sm">配清洁液</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx2.png" alt="" />
|
||||
<p class="sm">配护毛素</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx3.png" alt="" />
|
||||
<p class="sm">修剪指甲</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx4.png" alt="" />
|
||||
<p class="sm">修脚底毛</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx5.png" alt="" />
|
||||
<p class="sm">修腹底毛</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx6.png" alt="" />
|
||||
<p class="sm">修肛周毛</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx7.png" alt="" />
|
||||
<p class="sm">清洁耳朵</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx8.png" alt="" />
|
||||
<p class="sm">护理眼睛</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx9.png" alt="" />
|
||||
<p class="sm">梳理毛发</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx10.png" alt="" />
|
||||
<p class="sm">调试水温</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx11.png" alt="" />
|
||||
<p class="sm">抱宠入池</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx12.png" alt="" />
|
||||
<p class="sm">挤肛门腺</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx13.png" alt="" />
|
||||
<p class="sm">温水冲洗</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx14.png" alt="" />
|
||||
<p class="sm">一遍清洁</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx15.png" alt="" />
|
||||
<p class="sm">二遍清洁</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx16.png" alt="" />
|
||||
<p class="sm">洗护液冲净</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx17.png" alt="" />
|
||||
<p class="sm">一遍护毛</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx18.png" alt="" />
|
||||
<p class="sm">按摩吸收</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/txx19.png" alt="" />
|
||||
<p class="sm">护毛素冲净</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="outerLayer">
|
||||
<div class="receiving">
|
||||
<p class="jd">3.干毛阶段</p>
|
||||
</div>
|
||||
<div class="receive">
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/bm1.png" alt="" />
|
||||
<p class="sm">吹风收干</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/bm2.png" alt="" />
|
||||
<p class="sm">烘箱烘干</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/bm3.png" alt="" />
|
||||
<p class="sm">扫水吹干</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/bm4.png" alt="" />
|
||||
<p class="sm">毛巾擦干</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outerLayer">
|
||||
<div class="receiving">
|
||||
<p class="jd">4.检查阶段</p>
|
||||
</div>
|
||||
<div class="receive">
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/bm5.png" alt="" />
|
||||
<p class="sm">上门接宠</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outerLayer">
|
||||
<div class="receiving">
|
||||
<p class="jd">5.交宠阶段</p>
|
||||
</div>
|
||||
<div class="receive">
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/bm6.png" alt="" />
|
||||
<p class="sm">精油留香</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outerLayer">
|
||||
<div class="receiving">
|
||||
<p class="jd">6.设备清洁</p>
|
||||
</div>
|
||||
<div class="receive">
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/bm7.png" alt="" />
|
||||
<p class="sm">整理工具</p>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img class="tx1" src="@/assets/img/bm8.png" alt="" />
|
||||
<p class="sm">设备清洁</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 精品洗护产品 -->
|
||||
<div class="product" v-if="itemValu == '精选洗护产品'">
|
||||
<p class="p-title">选用美国高端宠物洗护品牌DAVIS（戴维斯）赛级香波，采用高品质成分，如天然植物精油、氨基酸、蛋白质等，这些成分能够为宠物毛发提供深层滋养和修复，同时保持毛发的健康状态。</p>
|
||||
<div class="brand">
|
||||
<img class="left1" src="@/assets/img/left1.png" alt="" />
|
||||
<img class="left2" src="@/assets/img/left2.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移动服务优势 -->
|
||||
<div v-if="itemValu == '移动服务优势'">
|
||||
<img class="compare1" src="@/assets/img/cpa1.png" alt="" />
|
||||
</div>
|
||||
<!-- 服务前后对比 -->
|
||||
<div class="compare2" v-if="itemValu == '服务前后对比'">
|
||||
<img class="compare" src="@/assets/img/compare111.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare2.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare3.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare4.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare5.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare6.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare7.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare8.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare9.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare10.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare11.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare12.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare13.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare14.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare15.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare16.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare17.png" alt="" />
|
||||
<img class="compare" src="@/assets/img/compare18.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="CompanyIntroduction">
|
||||
import { reactive, ref } from 'vue';
|
||||
import WOW from 'wow.js';
|
||||
import { onMounted } from 'vue';
|
||||
const itemValu = ref('精品洗护体验4大项')
|
||||
const navList = [
|
||||
{
|
||||
name: '精品洗护体验4大项',
|
||||
},
|
||||
{
|
||||
name: '洗护服务6阶段',
|
||||
},
|
||||
{
|
||||
name: '洗护流程30步',
|
||||
},
|
||||
{
|
||||
name: '精选洗护产品',
|
||||
},
|
||||
{
|
||||
name: '移动服务优势',
|
||||
},
|
||||
{
|
||||
name: '服务前后对比',
|
||||
}
|
||||
];
|
||||
onMounted(() => {
|
||||
const wow = new WOW();
|
||||
wow.init();
|
||||
});
|
||||
function titlecli(item){
|
||||
itemValu.value = item.name
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bd3{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.compare2{
|
||||
margin: 30px auto;
|
||||
display: flex;
|
||||
width: 78%;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.compare{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.p-title{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.brand{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.left1{
|
||||
width: 37%;
|
||||
height: 917.45px;
|
||||
}
|
||||
.left2{
|
||||
width: 37%;
|
||||
height: 917.45px;
|
||||
}
|
||||
.compare1{
|
||||
width: 78%;
|
||||
margin: 40px auto;
|
||||
height: 540px;
|
||||
}
|
||||
.sm{
|
||||
font-family: PingFangSC;
|
||||
font-size: 24px;
|
||||
color: #3D3D3D;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.tx1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.receive{
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 75%;
|
||||
}
|
||||
.avatar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.outerLayer{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.receiving{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 34px;
|
||||
width: 124px;
|
||||
height: 36px;
|
||||
border-radius: 155px;
|
||||
background: #FF19A0;
|
||||
}
|
||||
.jd{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.title{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.h{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.jp1{
|
||||
width: 282px;
|
||||
height: 282px;
|
||||
}
|
||||
.care1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
.care2{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}.care3{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}.care4{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}.care5{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}.care6{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
.p1{
|
||||
width: 90%;
|
||||
margin: 10px auto;
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
/* margin-top: 10px; */
|
||||
}
|
||||
.p{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.box{
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
width: 64%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.care{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.banner {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
@ -65,6 +521,164 @@
|
||||
font-size: 14px;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.bd3{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
content: url('@/assets/img/sj3.png');
|
||||
}
|
||||
.compare2{
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
width: 95%;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.compare{
|
||||
width: 48%;
|
||||
height: 48%;
|
||||
}
|
||||
.compare1{
|
||||
width: 90%;
|
||||
/* height: 824px; */
|
||||
margin: 20px auto;
|
||||
content: url('@/assets/img/cpa2.png');
|
||||
}
|
||||
.p-title{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
|
||||
/* text-align: center; */
|
||||
margin: 20px auto;
|
||||
width: 80%;
|
||||
}
|
||||
.xh{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.left1{
|
||||
width: 80%;
|
||||
height: 449.36px;
|
||||
content: url('@/assets/img/left3.png');
|
||||
}
|
||||
.left2{
|
||||
width: 80%;
|
||||
height: 449.36px;
|
||||
content: url('@/assets/img/left4.png');
|
||||
}
|
||||
.brand{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
.tx1{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.receive{
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.sm{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
.care1{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 288px;
|
||||
content: url('@/assets/img/carsj1.png');
|
||||
}
|
||||
.care2{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 288px;
|
||||
content: url('@/assets/img/carsj2.png');
|
||||
}
|
||||
.care3{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 288px;
|
||||
content: url('@/assets/img/carsj3.png');
|
||||
}
|
||||
.care4{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 288px;
|
||||
content: url('@/assets/img/carsj4.png');
|
||||
}
|
||||
.care5{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 288px;
|
||||
content: url('@/assets/img/carsj5.png');
|
||||
}
|
||||
.care6{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 288px;
|
||||
content: url('@/assets/img/carsj6.png');
|
||||
}
|
||||
.box{
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
}
|
||||
.jp1{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.h{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 10px;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
/* margin-top: 30px; */
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
width:800px;
|
||||
}
|
||||
.title-item{
|
||||
width: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 997px) {
|
||||
.CompanyIntroduction-container {
|
||||
padding: 10px 0;
|
||||
|
||||
@ -1,112 +1,146 @@
|
||||
<template>
|
||||
<div id="ContactUs">
|
||||
<div class="banner container-fuild text-center">联系我们</div>
|
||||
<div class="container">
|
||||
<div class="container-fuild ContactUs-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-6">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="name" class="col-sm-2 control-label">姓名</label>
|
||||
<div class="col-sm-10 col-xs-12">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="name"
|
||||
placeholder="请输入名字"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email" class="col-sm-2 control-label">邮箱</label>
|
||||
<div class="col-sm-10">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="email"
|
||||
placeholder="请输入邮箱"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="tel" class="col-sm-2 control-label">电话</label>
|
||||
<div class="col-sm-10">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="tel"
|
||||
placeholder="请输入电话"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="content" class="col-sm-2 control-label">内容</label>
|
||||
<div class="col-sm-10">
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="content"
|
||||
rows="8"
|
||||
placeholder="请输入内容"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
<button
|
||||
class="btn btn-default btn-block"
|
||||
@click.stop="submitForm"
|
||||
>
|
||||
提交
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-6">
|
||||
<div id="map" class="wow zoomIn"></div>
|
||||
<img class="bank1" src="@/assets/img/bd5.png" alt="" />
|
||||
<div class="title">
|
||||
<div class="title2">
|
||||
<div v-for="(item, index) in navList"
|
||||
:key="index" class="title-item">
|
||||
<span :class="[itemValu == item.name ? 'j1' : 'j' ]" @click="titlecli(item)">{{item.name}}</span>
|
||||
<div v-if="itemValu == item.name" class="h" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="responsibility">
|
||||
<p>岗位职责</p>
|
||||
<p class="p">1.Web前端功能设计、开发和实现，与后台工程师协作，完成数据交互、动态展现;</p>
|
||||
<p class="p">2.对UI设计的结果进行页面制作(CSS/css3+xhtml/html5+JS);</p>
|
||||
<p class="p">3.熟悉编写可复用的用户界面组件;</p>
|
||||
<p class="p">4.从视觉和易用性角度，为网站设计提供改进建议，为网站/客户端的页面提供持续优化方案;</p>
|
||||
<p class="p">5.配合程序员进行代码的调试、bug修复、浏览器兼容性调优;</p>
|
||||
<p class="p">6.能够独立完成前端框架的封装和组件的编写;</p>
|
||||
<p class="p">7.负责网站系统的页面制作、实现网站用户交互的效果;</p>
|
||||
<p class="p">8.了解前后端框架分离实现原理。</p>
|
||||
</div>
|
||||
<div class="responsibility">
|
||||
<p>任职资格</p>
|
||||
<p class="p">1.Web前端功能设计、开发和实现，与后台工程师协作，完成数据交互、动态展现;</p>
|
||||
<p class="p">2.对UI设计的结果进行页面制作(CSS/css3+xhtml/html5+JS);</p>
|
||||
<p class="p">3.熟悉编写可复用的用户界面组件;</p>
|
||||
<p class="p">4.从视觉和易用性角度，为网站设计提供改进建议，为网站/客户端的页面提供持续优化方案;</p>
|
||||
<p class="p">5.配合程序员进行代码的调试、bug修复、浏览器兼容性调优;</p>
|
||||
</div>
|
||||
<div class="responsibility">
|
||||
<p>联系我们</p>
|
||||
<p class="p">招聘：Hr@bcdj.cn</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="ContactUs">
|
||||
import WOW from 'wow.js'
|
||||
import { onMounted } from 'vue'
|
||||
import { reactive, ref } from 'vue';
|
||||
const itemValu = ref('前端开发')
|
||||
|
||||
// 百度地图BMap构造函数
|
||||
let BMap = null
|
||||
onMounted(() => {
|
||||
BMap = window.BMap
|
||||
var map = new BMap.Map('map') // 创建地图实例
|
||||
var point = new BMap.Point(114.54591657517, 30.496032878104) // 创建点坐标
|
||||
map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
|
||||
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
|
||||
var marker = new BMap.Marker(point) // 创建标注
|
||||
map.addOverlay(marker) // 将标注添加到地图中
|
||||
var opts = {
|
||||
width: 50, // 信息窗口宽度
|
||||
height: 10, // 信息窗口高度
|
||||
title: '武汉XXX公司' // 信息窗口标题
|
||||
const navList = [
|
||||
{
|
||||
name: '前端开发',
|
||||
},
|
||||
{
|
||||
name: '后端开发',
|
||||
},
|
||||
{
|
||||
name: '测试工程',
|
||||
},
|
||||
{
|
||||
name: 'ul设计',
|
||||
},
|
||||
{
|
||||
name: '产品经理',
|
||||
},
|
||||
{
|
||||
name: '项目经理',
|
||||
}
|
||||
var infoWindow = new BMap.InfoWindow(
|
||||
`<span>地址：武汉市东湖高新技术开发区，马蹄莲<span>
|
||||
<br>
|
||||
<span>联系方式：423</span>`,
|
||||
opts
|
||||
) // 创建信息窗口对象
|
||||
map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口
|
||||
var wow = new WOW()
|
||||
wow.init()
|
||||
];
|
||||
onMounted(() => {
|
||||
// BMap = window.BMap
|
||||
// var map = new BMap.Map('map') // 创建地图实例
|
||||
// var point = new BMap.Point(114.54591657517, 30.496032878104) // 创建点坐标
|
||||
// map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
|
||||
// map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
|
||||
// var marker = new BMap.Marker(point) // 创建标注
|
||||
// map.addOverlay(marker) // 将标注添加到地图中
|
||||
// var opts = {
|
||||
// width: 50, // 信息窗口宽度
|
||||
// height: 10, // 信息窗口高度
|
||||
// title: '武汉XXX公司' // 信息窗口标题
|
||||
// }
|
||||
// var infoWindow = new BMap.InfoWindow(
|
||||
// `<span>地址：武汉市东湖高新技术开发区，马蹄莲<span>
|
||||
// <br>
|
||||
// <span>联系方式：423</span>`,
|
||||
// opts
|
||||
// ) // 创建信息窗口对象
|
||||
// map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口
|
||||
// var wow = new WOW()
|
||||
// wow.init()
|
||||
})
|
||||
function submitForm() {
|
||||
window.open(
|
||||
'https://neveryu.github.io/web-bookmarks/interview/',
|
||||
'web-bookmarks'
|
||||
)
|
||||
}
|
||||
function titlecli(item){
|
||||
itemValu.value = item.name
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.title{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.responsibility{
|
||||
width: 70%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
.p{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 37%;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.h{
|
||||
width: 110%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.banner {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
@ -131,6 +165,68 @@ function submitForm() {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
content: url('@/assets/img/sj5.png');
|
||||
}
|
||||
.p{
|
||||
font-family: PingFangSC;
|
||||
font-size: 11px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
}
|
||||
.jp1{
|
||||
width: 320px;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.h{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 10px;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
/* margin-top: 30px; */
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
width:800px;
|
||||
}
|
||||
.title-item{
|
||||
width:62px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
.responsibility[data-v-f270821d] {
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 997px) {
|
||||
.ContactUs-container {
|
||||
padding: 20px 0;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,53 +1,181 @@
|
||||
<template>
|
||||
<div id="JobChance">
|
||||
<div class="banner container-fuild text-center">工作机会</div>
|
||||
<div class="container">
|
||||
<div class="JobChance-container wow pulse">
|
||||
<h2>软件工程师</h2>
|
||||
<p>岗位职责</p>
|
||||
<ol>
|
||||
<li>负责公司产品及项目系统的功能开发、代码优化；</li>
|
||||
<li>负责项目组人员任务的分配与监督，及时解决项目技术问题；</li>
|
||||
<li>
|
||||
参与系统需求分析与设计，并负责完成PHP核心代码，接口规范制定，架构设计。
|
||||
</li>
|
||||
</ol>
|
||||
<p>任职要求</p>
|
||||
<ol>
|
||||
<li>
|
||||
精通PHP+MySql+Apache开发，精通使用JavaScript、AJAX、JQuery等技术；3年以上WEB应用程序开发经验，
|
||||
有大型网站或电子商务网站工作经验者优先；
|
||||
</li>
|
||||
<li>熟悉jQuery，具有AJAX、HTML、CSS、JAVASCRIPT等方面的开发经验；</li>
|
||||
<li>
|
||||
熟悉PHP模板技术、框架技术及设计模式，有php框架系统进行开发经验者优先，如：phpcms，dedecms等；
|
||||
</li>
|
||||
<li>
|
||||
精通数据库原理，精通MYSQL、了解Mongo等并有相关关系数据库设计开发经验,
|
||||
了解Mysql的数据库配置管理、性能优化；
|
||||
</li>
|
||||
<li>
|
||||
熟悉常见的数据结构和算法，具备良好的编程习惯及较强的文档编写能力；
|
||||
</li>
|
||||
<li>熟悉各种WEB缓存技术,熟悉大型网站构架和性能优化；</li>
|
||||
<li>
|
||||
对网站系统架构的部署、搭建、优化、排错等方面有丰富经验，对高负载、大访问量情况下的系统架构有经验者优先。
|
||||
</li>
|
||||
</ol>
|
||||
<button
|
||||
class="center-block btn btn-warning btn-lg"
|
||||
@click.stop="submitForm"
|
||||
>
|
||||
投递简历
|
||||
</button>
|
||||
<div>
|
||||
<img class="bank1" src="@/assets/img/bd4.png" alt="" />
|
||||
<div class="title" v-if="imDetails">
|
||||
<div class="title2">
|
||||
<div v-for="(item, index) in navList"
|
||||
:key="index" :class="[itemValu == item.name ? ' title-item2' : ' title-item']">
|
||||
<span :class="[itemValu == item.name ? 'j1' : 'j' ]" @click="titlecli(item)">{{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acti-gance" v-if="imDetails">
|
||||
<div class="el-item" @click="petItem('上海宠物时装周')" v-if="itemValu == '展会活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance1.png" alt="" />
|
||||
<p class="zh1">展会-上海宠物时装周</p>
|
||||
<p class="zh2">上海宠物时装周：专注于宠物时尚、生活方式的品牌发布与文化盛宴。</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年11月03日</span> <span class="z1">展会活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('它博集')" v-if="itemValu == '市集活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance2.png" alt="" />
|
||||
<p class="zh1">它博集</p>
|
||||
<p class="zh2">它博集以超大型创意人宠市集为载体，主张人宠双向友好的城市生活方式，打造多元人宠生活体验与消费新场景。</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年10月16日</span> <span class="z1">市集活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('阿纳迪酒店')" v-if="itemValu == '酒店活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance3.png" alt="" />
|
||||
<p class="zh1">阿纳迪酒店</p>
|
||||
<p class="zh2">在户外区域还能带着宠物简单活动，比如散步消食、练习宠物瑜伽等，进一步丰富了人宠互动的体验。</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年10月14日</span> <span class="z1">酒店活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('光影节')" v-if="itemValu == '市集活动' || itemValu == '所有活动' " >
|
||||
<img class="elegance1" src="@/assets/img/elegance4.png" alt="" />
|
||||
<p class="zh1">光影节</p>
|
||||
<p class="zh2">上海国际光影节与宠物时尚秀的跨界合作活动。现场有可爱甜美、多巴胺配色、优雅高定等多种风格的宠物时装发布，还有人宠共秀环节</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年10月09日</span> <span class="z1">市集活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('浦江欢乐颂政府')" v-if="itemValu == '社区活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance5.png" alt="" />
|
||||
<p class="zh1">浦江欢乐颂政府活动</p>
|
||||
<p class="zh2">浦江欢乐颂的宠物主题活动内容十分多元，涵盖趣味竞赛、潮流展演、主题市集、手工社交及公益活动等多种类型，既有人宠互动的欢乐环节，也有贴合宠物产业的消费与公益场景</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年09月30日</span> <span class="z1">社区活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('宠享无界')" v-if="itemValu == '市集活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance6.png" alt="" />
|
||||
<p class="zh1">宠享无界</p>
|
||||
<p class="zh2">活动内容十分丰富，既有萌宠市集可选购宠物相关好物，也有宠物运动会供毛孩子闯关赢奖品，还有每日主题不同的 DIY 手工坊，能亲手给宠物制作项圈、小衣服等。</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年09月28日</span> <span class="z1">市集活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('浦发银行')" v-if="itemValu == '银行活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance7.png" alt="" />
|
||||
<p class="zh1">浦发银行</p>
|
||||
<p class="zh2">浦发银行围绕宠物经济，以打造宠物友好型网点为核心，搭配特色金融产品、趣味主题活动和宠物公益项目，构建了完善的 “宠物 + 金融” 服务体系，后续还拓展了多家升级版网点</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年09月28日</span> <span class="z1">银行活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('BFC')" v-if="itemValu == '商场活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance8.png" alt="" />
|
||||
<p class="zh1">BFC</p>
|
||||
<p class="zh2">BFC外滩金融中心是沪上知名的宠物友好地标，2024年更是将人宠友好纳入四大核心业态之一。它不仅打造了完善的人宠友好业态专区、配备贴心设施，还长期举办各类宠物主题活动，全方位满足养宠人群的多元需求</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年09月11日</span> <span class="z1">商场活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('亚宠展')" v-if="itemValu == '展会活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance9.png" alt="" />
|
||||
<p class="zh1">展会-亚宠展</p>
|
||||
<p class="zh2">2025年上海举办的是第27届亚洲宠物展，该展会于8月20日-24日在上海新国际博览中心开展，以 31 万平方米的超大展览规模、丰富的特色活动和前沿的行业布局，成为当年亚太地区宠物行业的旗舰盛会</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年08月26日</span> <span class="z1">展会活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('柴迷')" v-if="itemValu == '酒店活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance10.png" alt="" />
|
||||
<p class="zh1">柴迷活动</p>
|
||||
<p class="zh2">活动准备了柴犬主题定制周边，包括伴手礼袋、奖牌、冰箱贴、牵引套装、手办等。此外还有品牌联动福利，比如奕珮到家携手 aTwoValley 免费发放 500 瓶淳感 A2β 宠物牛奶，宠主转发指定内容到朋友圈就能现场领取。</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年07月11日</span> <span class="z1">酒店活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('翠湖天地')" v-if="itemValu == '银行活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance11.png" alt="" />
|
||||
<p class="zh1">翠湖天地</p>
|
||||
<p class="zh2">活动现场有宠物领养、免费体检及专家问诊、DIY 宠物创意项圈和定制营养餐等环节，还有宠物主题市集，提供洗护体验、免费疫苗等服务，吸引了众多宠物主人和毛孩子参与。</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年07月11日</span> <span class="z1">宠物友好银行</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('马尔济斯')" v-if="itemValu == '公园活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance12.png" alt="" />
|
||||
<p class="zh1">马尔济斯泳池派对</p>
|
||||
<p class="zh2">设置了毛孩比基尼泳池派对这类相关泳池互动板块，但这并非马尔济斯专属活动，而是面向各类宠物的通用互动环节。</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年07月05日</span> <span class="z1">公园活动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-item" @click="petItem('BMF')" v-if="itemValu == '市集活动' || itemValu == '所有活动' ">
|
||||
<img class="elegance1" src="@/assets/img/elegance13.png" alt="" />
|
||||
<p class="zh1">BMF</p>
|
||||
<p class="zh2">2025年6月21-22日在上海浦东新区银城路155 号GALA AVENUE光音广场举办的BMF滨江汪喵集</p>
|
||||
<div class="exhibition">
|
||||
<span class="z1">2025年06月26日</span> <span class="z1">市集活动</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="details" v-if="imGoBack">
|
||||
<div class="upper">
|
||||
<span @click="goBack" class="f">返回上一级</span> <img class="fh" src="@/assets/img/fh.png" alt="" /> <span class="d">当前页面</span>
|
||||
</div>
|
||||
<div class="pudong">
|
||||
<p class="pd1">浦发银行</p>
|
||||
<p class="pd2">浦发银行围绕宠物经济，以打造宠物友好型网点为核心，搭配特色金融产品、趣味主题活动和宠物公益项目，构建了完善的 “宠物 + 金融” 服务体系，后续还拓展了多家升级版网点。</p>
|
||||
<div class="pat-bank">
|
||||
<img class="bank2" src="@/assets/img/bank1.png" alt="" />
|
||||
<img class="bank2" src="@/assets/img/bank2.png" alt="" />
|
||||
<img class="bank2" src="@/assets/img/bank3.png" alt="" />
|
||||
<img class="bank2" src="@/assets/img/bank4.png" alt="" />
|
||||
<img class="bank2" src="@/assets/img/bank5.png" alt="" />
|
||||
<img class="bank2" src="@/assets/img/bank6.png" alt="" />
|
||||
<img class="bank2" src="@/assets/img/bank7.png" alt="" />
|
||||
<img class="bank2" src="@/assets/img/bank8.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="JobChance">
|
||||
import { reactive, ref } from 'vue';
|
||||
import WOW from 'wow.js'
|
||||
import { onMounted } from 'vue'
|
||||
const imDetails = ref(true)
|
||||
const imGoBack = ref(false)
|
||||
const itemValu = ref('所有活动')
|
||||
const navList = [
|
||||
{
|
||||
name: '所有活动',
|
||||
},
|
||||
{
|
||||
name: '展会活动',
|
||||
},
|
||||
{
|
||||
name: '酒店活动',
|
||||
},
|
||||
{
|
||||
name: '社区活动',
|
||||
},
|
||||
{
|
||||
name: '公园活动',
|
||||
},
|
||||
{
|
||||
name: '市集活动',
|
||||
},
|
||||
{
|
||||
name: '商场活动',
|
||||
},
|
||||
{
|
||||
name: '银行活动',
|
||||
}
|
||||
|
||||
];
|
||||
onMounted(() => {
|
||||
let wow = new WOW()
|
||||
wow.init()
|
||||
@ -55,9 +183,157 @@ onMounted(() => {
|
||||
function submitForm() {
|
||||
window.open('https://neveryu.github.io/neveryu/', 'NeverYu')
|
||||
}
|
||||
function titlecli(item){
|
||||
itemValu.value = item.name
|
||||
// console.log( itemValu.value,'--')
|
||||
}
|
||||
|
||||
function petItem(item){
|
||||
imDetails.value = false
|
||||
imGoBack.value = true
|
||||
console.log(item,'-?')
|
||||
|
||||
}
|
||||
function goBack(){
|
||||
imDetails.value = true
|
||||
imGoBack.value = false
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.bank2{
|
||||
width: 282px;
|
||||
height: 282px;
|
||||
/* margin-top: 40px; */
|
||||
}
|
||||
.pudong{
|
||||
text-align: center;
|
||||
}
|
||||
.pd1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.pd2{
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
/* margin: 2px 0; */
|
||||
|
||||
}
|
||||
.pat-bank{
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 65%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.acti-gance{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width:63%;
|
||||
margin: 30px auto;
|
||||
gap: 20px;
|
||||
}
|
||||
.upper{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
margin:0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.f{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
.d{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
.fh{
|
||||
width: 6px;
|
||||
height:10px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.exhibition{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.z1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
.el-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 282px;
|
||||
|
||||
}
|
||||
.elegance1{
|
||||
width: 282px;
|
||||
height: 282px;
|
||||
}
|
||||
.zh1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
}
|
||||
.zh2{
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
}
|
||||
.title{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width:39%;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.title-item{
|
||||
width: 76px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
/* border: 1px solid #000; */
|
||||
}
|
||||
.title-item2{
|
||||
width: 76px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #FF19A0;
|
||||
/* border: 1px solid #000; */
|
||||
}
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.banner {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
@ -92,6 +368,104 @@ function submitForm() {
|
||||
.JobChance-container ol > li {
|
||||
font-size: 14px;
|
||||
line-height: 2.7rem;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
content: url('@/assets/img/sj4.png');
|
||||
}
|
||||
.upper{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 40%;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.pat-bank {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: 91%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.bank2 {
|
||||
width:100%;
|
||||
height: 282px;
|
||||
/* margin-top: 40px; */
|
||||
}
|
||||
.pd2 {
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
width: 90%;
|
||||
margin: 10px auto;
|
||||
/* margin: 2px 0; */
|
||||
}
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
}
|
||||
.jp1{
|
||||
width: 320px;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.acti-gance {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 92%;
|
||||
margin: 30px auto;
|
||||
gap: 20px;
|
||||
}
|
||||
.el-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.elegance1 {
|
||||
width: 100%;
|
||||
/* margin: 0 auto; */
|
||||
height: 288px;
|
||||
}
|
||||
.h{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 10px;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
/* margin-top: 30px; */
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
width:800px;
|
||||
}
|
||||
.title-item{
|
||||
width: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (max-width: 997px) {
|
||||
.JobChance-container {
|
||||
|
||||
@ -1,90 +1,285 @@
|
||||
<template>
|
||||
<div id="NewsInformation">
|
||||
<div class="container">
|
||||
<div class="container text-center">
|
||||
<h3>新闻动态</h3>
|
||||
<p style="color: #b2b2b2">Company News</p>
|
||||
</div>
|
||||
<div class="nav container text-center">
|
||||
<a href="javascript:;" class="active">公司新闻</a>
|
||||
<a href="javascript:;">行业动态</a>
|
||||
</div>
|
||||
<ul class="news-container container-fuild">
|
||||
<li v-for="(item, index) in newsList" :key="index" class="wow fadeIn">
|
||||
<div class="content">
|
||||
<p>{{ item.title }}</p>
|
||||
<p>{{ item.introduce }}</p>
|
||||
</div>
|
||||
<div class="time">
|
||||
<p>{{ item.date }}</p>
|
||||
<span>{{ item.year }}</span>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<img src="@/assets/img/circle.png" />
|
||||
<i class="line center-block"></i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="contaianer-fuild text-center more">
|
||||
<i class="glyphicon glyphicon-th"></i>
|
||||
<img class="bd1" src="@/assets/img/bd2.png" alt="" />
|
||||
<div class="customer-f">
|
||||
|
||||
<div class="comments-y">
|
||||
<div class="case-item">
|
||||
<div class="case-top">
|
||||
<img class="avatar1" src="@/assets/img/avatar1.png" alt="" />
|
||||
<div class="case-t">
|
||||
<div class="case-r">
|
||||
<span class="case-y">用户_30788</span>
|
||||
<div class="case-x">
|
||||
<span class="xk">新客</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sj">2025-06-05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="case-x2">
|
||||
<span class="xk2">超赞</span>
|
||||
</div>
|
||||
<div class="star" v-for="item in 5" :key="item">
|
||||
<img class="xx" src="@/assets/img/xx.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<p class="ct">
|
||||
第一次叫上门给宠物洗澡服务，宠物美容师技术很好，服务很到位，宠物也感觉适应一点也不反抗，下次还找这家......
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-cw">
|
||||
<img class="cw" src="@/assets/img/cw1.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw2.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw3.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-item">
|
||||
<div class="case-top">
|
||||
<img class="avatar1" src="@/assets/img/avatar2.png" alt="" />
|
||||
<div class="case-t">
|
||||
<div class="case-r">
|
||||
<span class="case-y">用户_30788</span>
|
||||
<div class="case-x3">
|
||||
<span class="xk">回头客</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sj">2025-06-05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="case-x2">
|
||||
<span class="xk2">超赞</span>
|
||||
</div>
|
||||
<div class="star" v-for="item in 5" :key="item">
|
||||
<img class="xx" src="@/assets/img/xx.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<p class="ct">
|
||||
真的好方便，基本做到足不出户。我家的吹风会害怕，吹的时候挣脱绳子差点逃走。没想到车子还有烘干箱，虽然时间长，但是猫咪没有那么害怕了，很......
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-cw">
|
||||
<img class="cw" src="@/assets/img/cw4.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw5.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw6.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-item">
|
||||
<div class="case-top">
|
||||
<img class="avatar1" src="@/assets/img/avatar3.png" alt="" />
|
||||
<div class="case-t">
|
||||
<div class="case-r">
|
||||
<span class="case-y">用户_30788</span>
|
||||
<div class="case-x3">
|
||||
<span class="xk">回头客</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sj">2025-06-05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="case-x2">
|
||||
<span class="xk2">超赞</span>
|
||||
</div>
|
||||
<div class="star" v-for="item in 5" :key="item">
|
||||
<img class="xx" src="@/assets/img/xx.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<p class="ct">
|
||||
预约到家门口洗澡，超级方便啊！车子好漂亮，里面也很干净，小哥哥超nice的，耐心巨好，洗得很仔细！耳朵都掏了两遍～天很热，但是里面有空调，......
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-cw">
|
||||
<img class="cw" src="@/assets/img/cw7.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw8.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw9.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-item">
|
||||
<div class="case-top">
|
||||
<img class="avatar1" src="@/assets/img/avatar4.png" alt="" />
|
||||
<div class="case-t">
|
||||
<div class="case-r">
|
||||
<span class="case-y">用户_30788</span>
|
||||
<div class="case-x">
|
||||
<span class="xk">新客</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sj">2025-06-05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="case-x2">
|
||||
<span class="xk2">超赞</span>
|
||||
</div>
|
||||
<div class="star" v-for="item in 5" :key="item">
|
||||
<img class="xx" src="@/assets/img/xx.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<p class="ct">
|
||||
第一次下单上门洗狗完美解决场地和出门去宠物店的麻烦，而且还是洗着洗着下大暴雨了，美容师还很尽职尽责完成了，狗狗剪的非常漂亮审美也很好。
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-cw">
|
||||
<img class="cw" src="@/assets/img/cw10.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw11.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw12.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments-y">
|
||||
<div class="case-item">
|
||||
<div class="case-top">
|
||||
<img class="avatar1" src="@/assets/img/avatar1.png" alt="" />
|
||||
<div class="case-t">
|
||||
<div class="case-r">
|
||||
<span class="case-y">用户_30788</span>
|
||||
<div class="case-x">
|
||||
<span class="xk">新客</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sj">2025-06-05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="case-x2">
|
||||
<span class="xk2">超赞</span>
|
||||
</div>
|
||||
<div class="star" v-for="item in 5" :key="item">
|
||||
<img class="xx" src="@/assets/img/xx.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<p class="ct">
|
||||
第一次叫上门给宠物洗澡服务，宠物美容师技术很好，服务很到位，宠物也感觉适应一点也不反抗，下次还找这家......
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-cw">
|
||||
<img class="cw" src="@/assets/img/cw1.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw2.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw3.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-item">
|
||||
<div class="case-top">
|
||||
<img class="avatar1" src="@/assets/img/avatar2.png" alt="" />
|
||||
<div class="case-t">
|
||||
<div class="case-r">
|
||||
<span class="case-y">用户_30788</span>
|
||||
<div class="case-x3">
|
||||
<span class="xk">回头客</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sj">2025-06-05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="case-x2">
|
||||
<span class="xk2">超赞</span>
|
||||
</div>
|
||||
<div class="star" v-for="item in 5" :key="item">
|
||||
<img class="xx" src="@/assets/img/xx.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<p class="ct">
|
||||
真的好方便，基本做到足不出户。我家的吹风会害怕，吹的时候挣脱绳子差点逃走。没想到车子还有烘干箱，虽然时间长，但是猫咪没有那么害怕了，很......
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-cw">
|
||||
<img class="cw" src="@/assets/img/cw4.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw5.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw6.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-item">
|
||||
<div class="case-top">
|
||||
<img class="avatar1" src="@/assets/img/avatar3.png" alt="" />
|
||||
<div class="case-t">
|
||||
<div class="case-r">
|
||||
<span class="case-y">用户_30788</span>
|
||||
<div class="case-x3">
|
||||
<span class="xk">回头客</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sj">2025-06-05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="case-x2">
|
||||
<span class="xk2">超赞</span>
|
||||
</div>
|
||||
<div class="star" v-for="item in 5" :key="item">
|
||||
<img class="xx" src="@/assets/img/xx.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<p class="ct">
|
||||
预约到家门口洗澡，超级方便啊！车子好漂亮，里面也很干净，小哥哥超nice的，耐心巨好，洗得很仔细！耳朵都掏了两遍～天很热，但是里面有空调，......
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-cw">
|
||||
<img class="cw" src="@/assets/img/cw7.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw8.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw9.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-item">
|
||||
<div class="case-top">
|
||||
<img class="avatar1" src="@/assets/img/avatar4.png" alt="" />
|
||||
<div class="case-t">
|
||||
<div class="case-r">
|
||||
<span class="case-y">用户_30788</span>
|
||||
<div class="case-x">
|
||||
<span class="xk">新客</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sj">2025-06-05</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="case-x2">
|
||||
<span class="xk2">超赞</span>
|
||||
</div>
|
||||
<div class="star" v-for="item in 5" :key="item">
|
||||
<img class="xx" src="@/assets/img/xx.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<p class="ct">
|
||||
第一次下单上门洗狗完美解决场地和出门去宠物店的麻烦，而且还是洗着洗着下大暴雨了，美容师还很尽职尽责完成了，狗狗剪的非常漂亮审美也很好。
|
||||
</p>
|
||||
</div>
|
||||
<div class="display-cw">
|
||||
<img class="cw" src="@/assets/img/cw10.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw11.png" alt="" />
|
||||
<img class="cw" src="@/assets/img/cw12.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div class="container">
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="NewsInformation">
|
||||
import WOW from 'wow.js'
|
||||
import { onMounted } from 'vue'
|
||||
const newsList = [
|
||||
{
|
||||
id: '001',
|
||||
title: '世界上第一个程序员',
|
||||
introduce:
|
||||
'为计算程序拟定“算法”，写作的第四份“程序设计流程图”，被珍视为“第一位给计算机',
|
||||
date: '05-24',
|
||||
year: '2019'
|
||||
},
|
||||
{
|
||||
id: '002',
|
||||
title: '世界上第二个程序员',
|
||||
introduce:
|
||||
'为计算程序拟定“算法”，写作的第四份“程序设计流程图”，被珍视为“第一位给计算机',
|
||||
date: '05-24',
|
||||
year: '2019'
|
||||
},
|
||||
{
|
||||
id: '003',
|
||||
title: '世界上第三个程序员',
|
||||
introduce:
|
||||
'为计算程序拟定“算法”，写作的第四份“程序设计流程图”，被珍视为“第一位给计算机',
|
||||
date: '05-24',
|
||||
year: '2019'
|
||||
},
|
||||
{
|
||||
id: '004',
|
||||
title: '世界上第四个程序员',
|
||||
introduce:
|
||||
'为计算程序拟定“算法”，写作的第四份“程序设计流程图”，被珍视为“第一位给计算机',
|
||||
date: '05-24',
|
||||
year: '2019'
|
||||
},
|
||||
{
|
||||
id: '005',
|
||||
title: '世界上第五个程序员',
|
||||
introduce:
|
||||
'为计算程序拟定“算法”，写作的第五份“程序设计流程图”，被珍视为“第一位给计算机',
|
||||
date: '05-24',
|
||||
year: '2019'
|
||||
},
|
||||
{
|
||||
id: '006',
|
||||
title: '世界上第六个程序员',
|
||||
introduce:
|
||||
'为计算程序拟定“算法”，写作的第五份“程序设计流程图”，被珍视为“第一位给计算机',
|
||||
date: '05-24',
|
||||
year: '2019'
|
||||
}
|
||||
]
|
||||
onMounted(() => {
|
||||
var wow = new WOW()
|
||||
wow.init()
|
||||
@ -92,6 +287,194 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.customer-f {
|
||||
padding: 20px 0 10px 0;
|
||||
box-sizing: border-box;
|
||||
background: #efefef;
|
||||
transition: all ease 0.6s;
|
||||
}
|
||||
.comments-y {
|
||||
width: 64%;
|
||||
display: flex;
|
||||
margin: 20px auto;
|
||||
/* justify-content: center; */
|
||||
justify-content: space-around;
|
||||
}
|
||||
.bd1{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.case-item {
|
||||
width: 282px;
|
||||
/* height: 257px; */
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
padding: 10px;
|
||||
}
|
||||
.case-item2 {
|
||||
width: 282px;
|
||||
/* height: 257px; */
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
padding: 10px;
|
||||
}
|
||||
.zh{
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.zh1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.time-act{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
.time{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
.case-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.avatar1 {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.case-t {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 12px 0 0 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
.case-r {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.case-y {
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: #272427;
|
||||
}
|
||||
.case-x {
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
margin-left: 5px;
|
||||
border-radius: 2px;
|
||||
background: #ffecf3;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
}
|
||||
.xk {
|
||||
font-family: PingFangSC;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
color: #ff19a0;
|
||||
}
|
||||
.sj {
|
||||
font-family: PingFangSC;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
color: #9b939a;
|
||||
}
|
||||
.review {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.case-x2 {
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
/* margin-left:5px; */
|
||||
border-radius: 2px;
|
||||
background: #ffecf3;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
}
|
||||
.case-x3 {
|
||||
width: 40px;
|
||||
height: 14px;
|
||||
margin-left:5px;
|
||||
border-radius: 2px;
|
||||
background: #ffecf3;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
}
|
||||
.xk2 {
|
||||
font-family: PingFangSC;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
color: #ff19a0;
|
||||
}
|
||||
.star {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.xx {
|
||||
width: 10px;
|
||||
height: 9.26px;
|
||||
margin: 0 0 2px 6px;
|
||||
}
|
||||
.comment {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.ct {
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: #726e71;
|
||||
}
|
||||
.display-cw {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.comments-y {
|
||||
width: 64%;
|
||||
display: flex;
|
||||
margin: 20px auto;
|
||||
/* justify-content: center; */
|
||||
justify-content: space-around;
|
||||
}
|
||||
.cw {
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.customer-f3 {
|
||||
padding: 20px 0;
|
||||
box-sizing: border-box;
|
||||
transition: all ease 0.6s;
|
||||
}
|
||||
|
||||
.customer-f {
|
||||
padding: 20px 0 10px 0;
|
||||
box-sizing: border-box;
|
||||
background: #efefef;
|
||||
transition: all ease 0.6s;
|
||||
}
|
||||
.ys{
|
||||
margin-top: 15px;
|
||||
}
|
||||
.zr1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.nav {
|
||||
margin: 20px 0;
|
||||
}
|
||||
@ -209,6 +592,78 @@ onMounted(() => {
|
||||
.news-container > li > .circle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* 媒体查询（手机） */
|
||||
@media screen and (max-width: 768px){
|
||||
.bd1{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
content: url('@/assets/img/sj2.png');
|
||||
}
|
||||
.comments-y {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
/* margin: 20px auto; */
|
||||
/* justify-content: center; */
|
||||
flex-direction: column;
|
||||
}
|
||||
.case-item {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.cw {
|
||||
width: 32%;
|
||||
height: 120px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.avatar1 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.customer-f {
|
||||
padding: 1px 16px 2px 16px;
|
||||
box-sizing: border-box;
|
||||
background: #efefef;
|
||||
transition: all ease 0.6s;
|
||||
}
|
||||
.whyChooseUs{
|
||||
padding: 1px 16px 2px 16px;
|
||||
}
|
||||
|
||||
.container{
|
||||
padding: 0;
|
||||
}
|
||||
.project{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 15px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.project2{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 8px;
|
||||
/* margin: 10px auto; */
|
||||
}
|
||||
|
||||
.r1{
|
||||
top: 187.14px;
|
||||
width:100%;
|
||||
border-radius: 8px;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
}
|
||||
/* 媒体查询（平板） */
|
||||
@media screen and (min-width: 768px) and (max-width: 996px){
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,88 +1,209 @@
|
||||
<template>
|
||||
<div id="Service">
|
||||
<div class="container text-center">
|
||||
<h3>我们的服务</h3>
|
||||
<p style="color: #b2b2b2">The Best Service You Never See</p>
|
||||
<img class="bd1" src="@/assets/img/bd1.png" alt="" />
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<p class="p1">移动洗护/上门服务，省心便捷</p>
|
||||
<p class="p2">
|
||||
免去舟车劳顿：专业洗护车上门服务，宠物无需外出，避免焦虑和应激；
|
||||
</p>
|
||||
<p class="p2">
|
||||
一对一专属护理：一车一宠，每只宠物独享洗护空间，安全私密，无交叉感染风险；
|
||||
</p>
|
||||
<p class="p2">
|
||||
灵活预约，随时可享：小程序一键预约，选择最方便的时间和地点；
|
||||
</p>
|
||||
<p class="p2">
|
||||
恒温水洗+智能吹干：专业设备控制水温，舒适洗护，避免宠物着凉；
|
||||
</p>
|
||||
</div>
|
||||
<img class="wago1" src="@/assets/img/wago1.png" alt="" />
|
||||
</div>
|
||||
<div class="container2">
|
||||
<img class="wago2" src="@/assets/img/wago2.png" alt="" />
|
||||
<div class="content">
|
||||
<p class="p1">移动洗护/上门服务，省心便捷</p>
|
||||
<p class="p2">
|
||||
免去舟车劳顿：专业洗护车上门服务，宠物无需外出，避免焦虑和应激；
|
||||
</p>
|
||||
<p class="p2">
|
||||
一对一专属护理：一车一宠，每只宠物独享洗护空间，安全私密，无交叉感染风险；
|
||||
</p>
|
||||
<p class="p2">
|
||||
灵活预约，随时可享：小程序一键预约，选择最方便的时间和地点；
|
||||
</p>
|
||||
<p class="p2">
|
||||
恒温水洗+智能吹干：专业设备控制水温，舒适洗护，避免宠物着凉；
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="Service-container row">
|
||||
<div
|
||||
v-for="(item, index) in serviceList"
|
||||
:key="index"
|
||||
class="Service-item col-md-3 col-sm-6 col-xs-12 slideInUp wow"
|
||||
@click="ServiceClick(item.id)"
|
||||
>
|
||||
<div class="Service-item-wrapper">
|
||||
<div class="Service-item-top">
|
||||
<h4>{{ item.title }}</h4>
|
||||
<i></i>
|
||||
<p>{{ item.eng_title }}</p>
|
||||
<div class="content">
|
||||
<p class="p1">移动洗护/上门服务，省心便捷</p>
|
||||
<p class="p2">
|
||||
免去舟车劳顿：专业洗护车上门服务，宠物无需外出，避免焦虑和应激；
|
||||
</p>
|
||||
<p class="p2">
|
||||
一对一专属护理：一车一宠，每只宠物独享洗护空间，安全私密，无交叉感染风险；
|
||||
</p>
|
||||
<p class="p2">
|
||||
灵活预约，随时可享：小程序一键预约，选择最方便的时间和地点；
|
||||
</p>
|
||||
<p class="p2">
|
||||
恒温水洗+智能吹干：专业设备控制水温，舒适洗护，避免宠物着凉；
|
||||
</p>
|
||||
</div>
|
||||
<div class="Service-item-img">
|
||||
<img :src="item.img" alt="服务" />
|
||||
<img class="wago3" src="@/assets/img/wago3.png" alt="" />
|
||||
</div>
|
||||
<div class="Service-item-border"></div>
|
||||
<div class="container2">
|
||||
<img class="wago4" src="@/assets/img/wago4.png" alt="" />
|
||||
<div class="content">
|
||||
<p class="p1">移动洗护/上门服务，省心便捷</p>
|
||||
<p class="p2">
|
||||
免去舟车劳顿：专业洗护车上门服务，宠物无需外出，避免焦虑和应激；
|
||||
</p>
|
||||
<p class="p2">
|
||||
一对一专属护理：一车一宠，每只宠物独享洗护空间，安全私密，无交叉感染风险；
|
||||
</p>
|
||||
<p class="p2">
|
||||
灵活预约，随时可享：小程序一键预约，选择最方便的时间和地点；
|
||||
</p>
|
||||
<p class="p2">
|
||||
恒温水洗+智能吹干：专业设备控制水温，舒适洗护，避免宠物着凉；
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<p class="p1">移动洗护/上门服务，省心便捷</p>
|
||||
<p class="p2">
|
||||
免去舟车劳顿：专业洗护车上门服务，宠物无需外出，避免焦虑和应激；
|
||||
</p>
|
||||
<p class="p2">
|
||||
一对一专属护理：一车一宠，每只宠物独享洗护空间，安全私密，无交叉感染风险；
|
||||
</p>
|
||||
<p class="p2">
|
||||
灵活预约，随时可享：小程序一键预约，选择最方便的时间和地点；
|
||||
</p>
|
||||
<p class="p2">
|
||||
恒温水洗+智能吹干：专业设备控制水温，舒适洗护，避免宠物着凉；
|
||||
</p>
|
||||
</div>
|
||||
<img class="wago5" src="@/assets/img/wago5.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Service">
|
||||
import { useRouter } from 'vue-router';
|
||||
import { onMounted } from 'vue';
|
||||
import WOW from 'wow.js';
|
||||
import service1 from '@/assets/img/service1.jpg';
|
||||
import service2 from '@/assets/img/service2.jpg';
|
||||
import service3 from '@/assets/img/service3.jpg';
|
||||
import service4 from '@/assets/img/service4.jpg';
|
||||
const serviceList = [
|
||||
import { useRouter } from 'vue-router'
|
||||
import { onMounted } from 'vue'
|
||||
import WOW from 'wow.js'
|
||||
import service1 from '@/assets/img/service1.jpg'
|
||||
import service2 from '@/assets/img/service2.jpg'
|
||||
import service3 from '@/assets/img/service3.jpg'
|
||||
import service4 from '@/assets/img/service4.jpg'
|
||||
const serviceList = [
|
||||
{
|
||||
id: 'section-1',
|
||||
title: '散热半导体芯片',
|
||||
eng_title: 'Heat Dissipation Semiconductor Chip',
|
||||
img: service1,
|
||||
img: service1
|
||||
},
|
||||
{
|
||||
id: 'section-2',
|
||||
title: 'TEC晶振',
|
||||
eng_title: 'TEC Crystal Oscillator',
|
||||
img: service2,
|
||||
},
|
||||
{
|
||||
id: 'section-3',
|
||||
title: '液冷解决方案',
|
||||
eng_title: 'Liquid Cooling Solution',
|
||||
img: service3,
|
||||
},
|
||||
{
|
||||
id: 'section-4',
|
||||
title: '温控应用场景',
|
||||
eng_title: 'Temperature Control Application Scenarios',
|
||||
img: service4,
|
||||
},
|
||||
];
|
||||
img: service2
|
||||
}
|
||||
]
|
||||
|
||||
const router = useRouter();
|
||||
const router = useRouter()
|
||||
|
||||
function ServiceClick(id) {
|
||||
function ServiceClick(id) {
|
||||
router.push({
|
||||
name: 'serviceDetail',
|
||||
state: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
id
|
||||
}
|
||||
onMounted(() => {
|
||||
const wow = new WOW();
|
||||
wow.init();
|
||||
});
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
const wow = new WOW()
|
||||
wow.init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.Service-container {
|
||||
/* .Service-container {
|
||||
padding: 30px 50px;
|
||||
display: flex;
|
||||
} */
|
||||
.container {
|
||||
display: flex;
|
||||
width: 60%;
|
||||
margin-top: 40px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.container2 {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
margin-top: 40px;
|
||||
justify-content: space-between;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.container4 {
|
||||
display: flex;
|
||||
width: 84%;
|
||||
margin-top: 40px;
|
||||
justify-content: space-between;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.p1 {
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
.p2 {
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
.content {
|
||||
width: 588px;
|
||||
height: 243px;
|
||||
}
|
||||
.bd1 {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.wago1 {
|
||||
width: 588px;
|
||||
height: 330.75px;
|
||||
}
|
||||
.wago2 {
|
||||
width: 588px;
|
||||
height: 330.75px;
|
||||
}
|
||||
.wago3 {
|
||||
width: 588px;
|
||||
height: 330.75px;
|
||||
}
|
||||
.wago4 {
|
||||
width: 588px;
|
||||
height: 330.75px;
|
||||
}
|
||||
.wago5 {
|
||||
width: 588px;
|
||||
height: 330.75px;
|
||||
}
|
||||
.Service-item {
|
||||
margin-bottom: 50px;
|
||||
@ -148,4 +269,82 @@
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
/* 媒体查询（手机） */
|
||||
@media screen and (max-width: 768px) {
|
||||
.bd1 {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
content: url('@/assets/img/sj1.png');
|
||||
}
|
||||
.wago1 {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
height: 162px;
|
||||
content: url('@/assets/img/cat1.png');
|
||||
}
|
||||
.wago2 {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
height: 162px;
|
||||
content: url('@/assets/img/cat2.png');
|
||||
}
|
||||
.wago3 {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
height: 162px;
|
||||
content: url('@/assets/img/cat3.png');
|
||||
}
|
||||
.wago4 {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
height: 162px;
|
||||
content: url('@/assets/img/cat4.png');
|
||||
}
|
||||
.wago5 {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
height: 162px;
|
||||
content: url('@/assets/img/cat5.png');
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
flex-direction: column;
|
||||
/* justify-content: space-between; */
|
||||
}
|
||||
.container2 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
/* flex-direction: column; */
|
||||
flex-direction: column-reverse;
|
||||
/* justify-content: space-between; */
|
||||
}
|
||||
.container4 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
/* flex-direction: column; */
|
||||
flex-direction: column-reverse;
|
||||
/* justify-content: space-between; */
|
||||
}
|
||||
.content {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
/* 媒体查询（平板） */
|
||||
@media screen and (min-width: 768px) and (max-width: 996px) {
|
||||
}
|
||||
</style>
|
||||
|
||||
259
src/view/WagooCat.vue
Normal file
259
src/view/WagooCat.vue
Normal file
@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div id="ContactUs">
|
||||
<img class="bank1" src="@/assets/img/bd9.png" alt="" />
|
||||
<div class="brand">
|
||||
<p class="pp1">Wagoo是谁？</p>
|
||||
<p class="pp2">“帮宠到家”旗下品牌--Wagoo致力于打造【一站式移动宠物服务平台】，以“移动宠爱，悦享生活”为起点，聚焦宠物与主人的全方位需求，打破传统宠物店“三公里”限制，为爱宠提供便捷，舒适的上门洗护体验，力求让每一次体验都成为宠物与主人之间的美好回忆。</p>
|
||||
<video src="@/assets/img/sp.mp4" controls class="m1" @play="onPlay" @pause="onPause">
|
||||
</video>
|
||||
<!-- <img class="m1" src="@/assets/img/sp.png" alt="" /> -->
|
||||
<p class="pp3">品牌理念</p>
|
||||
<p class="pp4">Wagoo，将便捷、专业与深情关爱巧妙融合，打造每一次无与伦比的宠物护理体验。 秉承“移动宠爱，悦享生活”的核心理念，我们凭借创新的服务模式与全方位的宠物护理解决方案，为宠物与宠物主人开启一段前所未有的愉悦与便捷之旅。</p>
|
||||
<p class="pp4">移动空间，宠爱无界：Wagoo 移动宠物洗护车，颠覆传统，打破时空束缚。无需再受限于宠物店的位置与时间，只需轻触小程序，轻松预约，我们的洗护车便如约而至，上门服务。这份随时随地的便捷，让宠物主人在繁忙生活中也能随时给予爱宠最贴心的关怀与呵护。</p>
|
||||
<p class="pp4">专业护理，尊享品质：深知专业护理对宠物健康的重要性，移动洗护车 Wagoo car汇聚专业美容师与训犬师精英团队，他们技艺精湛，经验丰富，为宠物提供洗澡、美容、疫苗接种、训练寄养等一站式服务。我们精选国际宠物赛级洗护用品，确保每一次护理都是对宠物的极致宠爱，让宠物享受超凡体验。</p>
|
||||
<p class="pp4">社交互动，乐在其中：在Wagoo 的移动洗护车上，宠物不仅能享受专业护理，还能结识新朋友。我们定期举办宠物聚会与主题活动，为宠物与宠物主人搭建一个交流分享的欢乐平台。在这里，宠物在护理中感受乐趣与陪伴，宠物主人也能结识志同道合的朋友，共同分享养宠的点滴快乐与宝贵经验。</p>
|
||||
<p class="pp4">零售服务，一应俱全：为了更全面地满足宠物主人的需求，Wagoo 移动洗护车还提供宠物零售服务。我们精心挑选各类宠物食品、玩具、用品等商品，让宠物主人在享受护理服务的同时，也能一站式解决宠物的所有日常需求。这种全方位、一站式的服务模式，不仅提升了用户的便捷性，更彰显了Wagoo 品牌的综合竞争力与独特魅力。</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="ContactUs">
|
||||
import WOW from 'wow.js'
|
||||
import { onMounted } from 'vue'
|
||||
import { reactive, ref } from 'vue';
|
||||
const itemValu = ref('前端开发')
|
||||
|
||||
// 百度地图BMap构造函数
|
||||
let BMap = null
|
||||
const navList = [
|
||||
{
|
||||
name: '前端开发',
|
||||
},
|
||||
{
|
||||
name: '后端开发',
|
||||
},
|
||||
{
|
||||
name: '测试工程',
|
||||
},
|
||||
{
|
||||
name: 'ul设计',
|
||||
},
|
||||
{
|
||||
name: '产品经理',
|
||||
},
|
||||
{
|
||||
name: '项目经理',
|
||||
}
|
||||
];
|
||||
onMounted(() => {
|
||||
// BMap = window.BMap
|
||||
// var map = new BMap.Map('map') // 创建地图实例
|
||||
// var point = new BMap.Point(114.54591657517, 30.496032878104) // 创建点坐标
|
||||
// map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
|
||||
// map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
|
||||
// var marker = new BMap.Marker(point) // 创建标注
|
||||
// map.addOverlay(marker) // 将标注添加到地图中
|
||||
// var opts = {
|
||||
// width: 50, // 信息窗口宽度
|
||||
// height: 10, // 信息窗口高度
|
||||
// title: '武汉XXX公司' // 信息窗口标题
|
||||
// }
|
||||
// var infoWindow = new BMap.InfoWindow(
|
||||
// `<span>地址：武汉市东湖高新技术开发区，马蹄莲<span>
|
||||
// <br>
|
||||
// <span>联系方式：423</span>`,
|
||||
// opts
|
||||
// ) // 创建信息窗口对象
|
||||
// map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口
|
||||
// var wow = new WOW()
|
||||
// wow.init()
|
||||
})
|
||||
function submitForm() {
|
||||
window.open(
|
||||
'https://neveryu.github.io/web-bookmarks/interview/',
|
||||
'web-bookmarks'
|
||||
)
|
||||
}
|
||||
function titlecli(item){
|
||||
itemValu.value = item.name
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.brand{
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pp1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;color:
|
||||
#333333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.pp2{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.pp3{
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.pp4{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.m1{
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
height: 675px;
|
||||
}
|
||||
.title{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.responsibility{
|
||||
width: 70%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
.p{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 37%;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.h{
|
||||
width: 110%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.banner {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
background-image: url('../assets/img/banner_1.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: scroll;
|
||||
background-position: center center;
|
||||
}
|
||||
.ContactUs-container {
|
||||
padding: 80px 0;
|
||||
transition: all ease 0.5s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 365px;
|
||||
}
|
||||
.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
content: url('@/assets/img/sj9.png');
|
||||
}
|
||||
.m1{
|
||||
width: 100%;
|
||||
height: 162px;
|
||||
content: url('@/assets/img/w-cat.png');
|
||||
}
|
||||
.brand[data-v-03a99893] {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.p{
|
||||
font-family: PingFangSC;
|
||||
font-size: 11px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
}
|
||||
.jp1{
|
||||
width: 320px;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.h{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 10px;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
/* margin-top: 30px; */
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
width:800px;
|
||||
}
|
||||
.title-item{
|
||||
width:62px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
.responsibility[data-v-f270821d] {
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 997px) {
|
||||
.ContactUs-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
372
src/view/customer.vue
Normal file
372
src/view/customer.vue
Normal file
@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div id="ContactUs">
|
||||
<img class="bank1" src="@/assets/img/bd8.png" alt="" />
|
||||
<div class="pet">
|
||||
<p class="p1">养宠达人合作关系</p>
|
||||
<p class="p2">与⼩红书、微博、抖⾳ 、 B站、微信等社交媒体平台近 500名有养宠的宠物、运动和健康⽣活⽅式类等博主保持合作关系，粉丝量级从1万-500万+不等</p>
|
||||
</div>
|
||||
|
||||
<div class="pet2">
|
||||
<p class="p3">宠物类</p>
|
||||
<div class="head">
|
||||
<img class="expert1" src="@/assets/img/expert1.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert2.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert3.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert4.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert5.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert6.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="pet2">
|
||||
<p class="p3">运动类</p>
|
||||
<div class="head">
|
||||
<img class="expert1" src="@/assets/img/expert7.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert8.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert9.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert10.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert11.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert12.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="pet2">
|
||||
<p class="p3">生活方式类</p>
|
||||
<div class="head">
|
||||
<img class="expert1" src="@/assets/img/expert13.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert14.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert15.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert16.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert17.png" alt="" />
|
||||
<img class="expert1" src="@/assets/img/expert18.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="whyChooseUs">
|
||||
<div class="container4" >
|
||||
<div class="top1">
|
||||
<span class="c1">合作伙伴</span>
|
||||
<span class="c2" style="margin-bottom:8px;">Partner</span>
|
||||
</div>
|
||||
<div class="project3">
|
||||
<img class="zr1" src="@/assets/img/hz1.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz2.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz3.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz4.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz5.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz6.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz7.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz8.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz9.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz10.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz11.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz12.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz13.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz14.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz15.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz16.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz17.png" alt="" />
|
||||
<img class="zr1" src="@/assets/img/hz18.png" alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="ContactUs">
|
||||
import WOW from 'wow.js'
|
||||
import { onMounted } from 'vue'
|
||||
import { reactive, ref } from 'vue';
|
||||
const itemValu = ref('前端开发')
|
||||
|
||||
// 百度地图BMap构造函数
|
||||
let BMap = null
|
||||
onMounted(() => {
|
||||
})
|
||||
function submitForm() {
|
||||
window.open(
|
||||
'https://neveryu.github.io/web-bookmarks/interview/',
|
||||
'web-bookmarks'
|
||||
)
|
||||
}
|
||||
function titlecli(item){
|
||||
itemValu.value = item.name
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.whyChooseUs{
|
||||
padding:10px 20px 20px 20px;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
.top1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.zr1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.project3{
|
||||
display: flex;
|
||||
margin:0 auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.whyChooseUs2{
|
||||
padding:20px 20px 20px 20px;
|
||||
}
|
||||
.container4{
|
||||
width:81%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.container{
|
||||
width: 68%;
|
||||
}
|
||||
.c1 {
|
||||
color: #333333;
|
||||
font-family: PingFangSC;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.c2 {
|
||||
font-family: PingFangSC;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
flex: 1 1 20%; /* 或者其他百分比，确保在大屏时每个项占用25%的宽度 */
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.title{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.pet{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.pet2{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 63%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.p1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.head{
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.expert1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
.p2{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
.p3{
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
.responsibility{
|
||||
width: 70%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
.p{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 37%;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.h{
|
||||
width: 110%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.banner {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
background-image: url('../assets/img/banner_1.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: scroll;
|
||||
background-position: center center;
|
||||
}
|
||||
.ContactUs-container {
|
||||
padding: 80px 0;
|
||||
transition: all ease 0.5s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 365px;
|
||||
}
|
||||
.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
content: url('@/assets/img/sj8.png');
|
||||
}
|
||||
.p{
|
||||
font-family: PingFangSC;
|
||||
font-size: 11px;
|
||||
color: #666666;
|
||||
}
|
||||
.expert1{
|
||||
width:39%;
|
||||
height: 136px;
|
||||
}
|
||||
.head{
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.zr1{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.p1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.p2{
|
||||
font-family: PingFangSC;
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
color: #666666
|
||||
}
|
||||
.p3{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
.container4 {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pet2{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
}
|
||||
.jp1{
|
||||
width: 320px;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.h{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 10px;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
/* margin-top: 30px; */
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
width:800px;
|
||||
}
|
||||
.title-item{
|
||||
width:62px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
.responsibility[data-v-f270821d] {
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 997px) {
|
||||
.ContactUs-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
820
src/view/franchise.vue
Normal file
820
src/view/franchise.vue
Normal file
@ -0,0 +1,820 @@
|
||||
<template>
|
||||
<div id="ContactUs">
|
||||
<img class="bank1" src="@/assets/img/bd6.png" alt="" />
|
||||
<div class="franchise">
|
||||
<p class="selek">请选择加盟的地区,并填写下列的表单</p>
|
||||
<el-form :model="form" label-width="auto" >
|
||||
|
||||
<div class="selekt">
|
||||
<!-- <div class="se1"> -->
|
||||
<el-form-item label="请选择省市区">
|
||||
<el-cascader
|
||||
class="Please-s"
|
||||
placeholder="请选择"
|
||||
v-model="selectedOptions"
|
||||
:options="options"
|
||||
@change="handleChange2"
|
||||
clearable
|
||||
collapse-tags
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
|
||||
<p class="selek">个人资料（申请者经营者本人，且需全职在店经营）</p>
|
||||
<div class="selekt">
|
||||
<div class="se1">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="se2">
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio value="Sponsor">男性</el-radio>
|
||||
<el-radio value="Venue">女性</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="11" style="margin-right:50px;">
|
||||
<el-form-item label="出生日期">
|
||||
<el-select v-model="form.region" placeholder="请选择出生日期">
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="籍贯">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="11" style="margin-right:50px;">
|
||||
<el-form-item label="联络电话">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="手机">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<div class="selekt">
|
||||
<div class="se1">
|
||||
<el-form-item label="婚姻状况">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio value="Sponsor">已婚</el-radio>
|
||||
<el-radio value="Venue">未婚</el-radio>
|
||||
<el-radio value="Venue2">离婚</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
<div class="se2">
|
||||
<el-form-item label="子女人数">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <el-row>
|
||||
<el-col :span="11" style="margin-right:50px;">
|
||||
<el-form-item label="配偶姓名">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="配偶职业">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
|
||||
<el-row>
|
||||
<el-col :span="11" style="margin-right:50px;">
|
||||
<el-form-item label="现居地址">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="户籍地址">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="11" style="margin-right:50px;">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="区域人口数">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="11" style="margin-right:50px;">
|
||||
<el-form-item label="主要竞争品牌">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="竞争品牌店数">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<div>
|
||||
<span class="selek">上传三个月内大头照</span><span>（不超过1M）</span>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
class="avatar-uploader"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:on-change="handleChange"
|
||||
>
|
||||
<img v-if="previewUrl" :src="previewUrl" class="avatar" />
|
||||
<!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
|
||||
</el-upload>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="selek">教育程度</span>
|
||||
<el-row>
|
||||
<el-col :span="11" style="margin-right:50px;">
|
||||
<el-form-item label="最高教育程度（需已毕业）">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="校名/科系">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="selekt">
|
||||
<div class="se1">
|
||||
<el-form-item label="创业自营经验">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio value="Sponsor">无</el-radio>
|
||||
<el-radio value="Venue">有</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="se2">
|
||||
<el-form-item label="店名">
|
||||
<el-input class="Shop" v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="selekt">
|
||||
<div class="se1">
|
||||
<el-form-item label="职称">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="se2">
|
||||
<div class="staTime">
|
||||
<p class="pp">开始至结束日期</p>
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="dateChange"
|
||||
:disabledDate="disabledDateFun"
|
||||
:default-time="defaultTime"
|
||||
@calendar-change="calendarChange"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<span class="selek">工作经历1</span>
|
||||
<el-row>
|
||||
<el-col :span="11" style="margin:15px 50px 0 0 ;">
|
||||
<el-form-item label="公司名称">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="职称">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="selekt">
|
||||
<div class="se1">
|
||||
<el-form-item label="月收入">
|
||||
<el-input v-model="form.name" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="se2">
|
||||
<div class="staTime">
|
||||
<p class="pp">开始至结束日期</p>
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="dateChange"
|
||||
:disabledDate="disabledDateFun"
|
||||
:default-time="defaultTime"
|
||||
@calendar-change="calendarChange"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="selekt">
|
||||
<div class="se1">
|
||||
<p class="inquire">（1）请问您选择加盟创业的原因为何？</p>
|
||||
<el-form-item label="">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio value="Sponsor">完善的开店知识</el-radio>
|
||||
<el-radio value="Venue">加盟店整体形象</el-radio>
|
||||
<el-radio value="Venue">完整的教育训练</el-radio>
|
||||
<el-radio value="Venue">方便迅速</el-radio>
|
||||
<el-radio value="Venue">其他</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-input placeholder="请输入" v-model="form.desc" type="textarea" />
|
||||
|
||||
</div>
|
||||
<div class="se2">
|
||||
<p class="inquire">（2）请问您预计何时加盟创业？</p>
|
||||
<el-form-item label="">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio value="Sponsor">立即</el-radio>
|
||||
<el-radio value="Venue">3个月内</el-radio>
|
||||
<el-radio value="Venue">3-6个月内</el-radio>
|
||||
<el-radio value="Venue">一年内</el-radio>
|
||||
<el-radio value="Venue">一年后</el-radio>
|
||||
<el-radio value="Venue">其他</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-input v-model="form.desc" placeholder="请输入" type="textarea" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="selekt">
|
||||
<div class="se1">
|
||||
<p style="margin-top:20px;">（3）请问您预计投入总资金为</p>
|
||||
<el-input style="margin-top:7px;" placeholder="请输入" v-model="form.desc" type="textarea" />
|
||||
<p style="margin:10px 0 0 20px;">万元(包含加盟金、装修、租金、人员、食材、执照等)</p>
|
||||
|
||||
</div>
|
||||
<div class="se3">
|
||||
<p>（4）请问您预计何时加盟创业？</p>
|
||||
<el-form-item label="">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio value="Sponsor">立即</el-radio>
|
||||
<el-radio value="Venue">3个月内</el-radio>
|
||||
<el-radio value="Venue">3-6个月内</el-radio>
|
||||
<el-radio value="Venue">一年内</el-radio>
|
||||
<el-radio value="Venue">一年后</el-radio>
|
||||
<el-radio value="Venue">其他</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-input style="margin-top:0;" placeholder="请输入" v-model="form.desc" type="textarea" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <el-row>
|
||||
<el-col style="display: flex;flex-direction: column;" :span="24" >
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col style="display: flex;flex-direction: column;" :span="24" >
|
||||
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
|
||||
<div class="selekt">
|
||||
<div class="se1">
|
||||
<p style="margin-top:10px;">（5）为何想加入？</p>
|
||||
<el-input style="margin-top:0;" placeholder="请输入" v-model="form.desc" type="textarea" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <el-row>
|
||||
<el-col style="display: flex;flex-direction: column;" :span="24" >
|
||||
<p style="margin-top:10px;">（5）为何想加入？</p>
|
||||
<el-input style="margin-top:0;" placeholder="请输入" v-model="form.desc" type="textarea" />
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
|
||||
<div class="attention">
|
||||
<h5>注意事项</h5>
|
||||
<p class="windo">(1)此窗体仅限申请加盟意愿用，谢谢您的配合。</p>
|
||||
<p class="windo">(2)第一阶段书面审核将于5个工作天内回复，请留意邮箱及垃圾信件。</p>
|
||||
<p class="windo">(3)所有审核结果皆由Hr@bcdj.cn加盟咨询系统邮箱回复，请勿轻信wechat、 面访…等其他通知邀约。</p>
|
||||
<p class="windo">(4) 为保护个资，未通过之书面审核数据将定期销毁。</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="confirm">
|
||||
<el-button color="#FF19A0" @click="onSubmit">清除</el-button>
|
||||
<el-button color="#FF19A0">送出</el-button>
|
||||
</div>
|
||||
<!-- <el-form-item label="开关">
|
||||
<el-switch v-model="form.delivery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="多选">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox value="Online activities" name="type">
|
||||
青菜
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Promotion activities" name="type">
|
||||
萝卜
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Offline activities" name="type">
|
||||
白菜
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Simple brand exposure" name="type">
|
||||
番茄
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="单选">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio value="Sponsor">Sponsor</el-radio>
|
||||
<el-radio value="Venue">Venue</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动详情">
|
||||
<el-input v-model="form.desc" type="textarea" />
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts" name="ContactUs">
|
||||
import WOW from 'wow.js'
|
||||
import { onMounted } from 'vue'
|
||||
import { reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import type { ElUpload, UploadProps } from 'element-plus'
|
||||
import axios from 'axios'
|
||||
const previewUrl = ref('') // 图片预览地址
|
||||
const selectedFile = ref<File | null>(null) // 选中的文件对象
|
||||
const date = ref('')
|
||||
const defaultTime = ref<[Date, Date]>([
|
||||
new Date(2000, 1, 1, 0, 0, 0),
|
||||
new Date(2000, 2, 1, 23, 59, 59),
|
||||
])
|
||||
const uploadRef = ref<InstanceType<typeof ElUpload> | null>(null) // 引用上传组件实例
|
||||
const selectedOptions = ref([]); // 用于存储选中的选项
|
||||
|
||||
|
||||
/**
|
||||
* 处理文件上传变更的函数
|
||||
*
|
||||
* @param uploadFile 当前上传的文件对象
|
||||
* @param uploadFiles 所有已上传的文件对象数组
|
||||
*/
|
||||
const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
|
||||
selectedFile.value = uploadFile.raw as File;
|
||||
previewUrl.value = URL.createObjectURL(selectedFile.value)
|
||||
}
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: 'http://localhost:3000',
|
||||
timeout:4000
|
||||
})
|
||||
|
||||
// 上传图片的方法,这里将这个方法暴露给父组件使用，方便调用
|
||||
const triggerUpload =async ()=>{
|
||||
if(!selectedFile.value) return;
|
||||
|
||||
// 创建FormData对象，用于存放要上传的文件数据
|
||||
const formData = new FormData();
|
||||
// 将文件添加到FormData对象中，这里的'avatar'是后端接收文件的字段名
|
||||
formData.append('avatar', selectedFile.value)
|
||||
try{
|
||||
// 实际使用应该将这个方法进行封装，这里为了演示直接写在组件内部了。
|
||||
const {data} = await instance({
|
||||
url:'/postFile',
|
||||
method:'post',
|
||||
data:formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
})
|
||||
console.log(data)
|
||||
ElMessage({
|
||||
message: '头像上传成功!',
|
||||
type: 'success',
|
||||
})
|
||||
}catch(err){
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
defineExpose({
|
||||
triggerUpload
|
||||
})
|
||||
const form = reactive({
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
})
|
||||
const itemValu = ref('前端开发')
|
||||
const options = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: '浙江',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州',
|
||||
children: [
|
||||
{
|
||||
value: 'xihu',
|
||||
label: '西湖区',
|
||||
// 可以继续添加更细分的区域
|
||||
},
|
||||
// ...其他区
|
||||
],
|
||||
},
|
||||
// ...其他市
|
||||
],
|
||||
},
|
||||
// ...其他省
|
||||
];
|
||||
// 百度地图BMap构造函数
|
||||
let BMap = null
|
||||
const navList = [
|
||||
{
|
||||
name: '前端开发',
|
||||
},
|
||||
{
|
||||
name: '后端开发',
|
||||
},
|
||||
{
|
||||
name: '测试工程',
|
||||
},
|
||||
{
|
||||
name: 'ul设计',
|
||||
},
|
||||
{
|
||||
name: '产品经理',
|
||||
},
|
||||
{
|
||||
name: '项目经理',
|
||||
}
|
||||
];
|
||||
onMounted(() => {
|
||||
})
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
}
|
||||
function handleChange2(value, selectedData) {
|
||||
console.log(value, selectedData);
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
window.open(
|
||||
'https://neveryu.github.io/web-bookmarks/interview/',
|
||||
'web-bookmarks'
|
||||
)
|
||||
}
|
||||
function titlecli(item){
|
||||
itemValu.value = item.name
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader .avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
display: flex;
|
||||
width: 520px;
|
||||
--font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
::v-deep .el-textarea__inner{
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
::v-deep .el-tooltip__trigger{
|
||||
width: 340px;
|
||||
}
|
||||
/* .Shop{
|
||||
width: 430px;
|
||||
} */
|
||||
|
||||
.staTime{
|
||||
width: 520px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.selekt{
|
||||
display: flex;
|
||||
}
|
||||
.se1{
|
||||
width: 55%;
|
||||
|
||||
}
|
||||
.se2{
|
||||
width: 55%;
|
||||
}
|
||||
.se3{
|
||||
width: 55%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.Please-s{
|
||||
width: 330px !important;
|
||||
}
|
||||
|
||||
.confirm{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pp{
|
||||
margin: 2px 10px 0 0 ;
|
||||
|
||||
}
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.franchise{
|
||||
width: 60%;
|
||||
margin: 40px auto;
|
||||
}
|
||||
.selek{
|
||||
margin:0 0 10px 99px;
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.banner {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
background-image: url('../assets/img/banner_1.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: scroll;
|
||||
background-position: center center;
|
||||
}
|
||||
.ContactUs-container {
|
||||
padding: 80px 0;
|
||||
transition: all ease 0.5s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 365px;
|
||||
}
|
||||
.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
content: url('@/assets/img/sj6.png');
|
||||
}
|
||||
.attention{
|
||||
margin: 0 20px;
|
||||
}
|
||||
.selekt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.staTime{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
/* margin-left: 20px; */
|
||||
}
|
||||
.pp {
|
||||
margin: 2px 10px 0 20px;
|
||||
}
|
||||
::v-deep .el-tooltip__trigger{
|
||||
width: 350px;
|
||||
}
|
||||
.confirm{
|
||||
/* width: 100px; */
|
||||
/* display: flex;
|
||||
justify-content: center; */
|
||||
margin: 40px 0 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.windo{
|
||||
font-family: PingFangSC;
|
||||
font-size: 11px;
|
||||
color: #666666;
|
||||
}
|
||||
.se1{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
}
|
||||
.se2{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
}
|
||||
.franchise[data-v-4fdcdf04] {
|
||||
width: 100%;
|
||||
margin: 40px auto;
|
||||
}
|
||||
.selek {
|
||||
margin: 0 0 10px 20px;
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
}
|
||||
.inquire{
|
||||
margin-top: 20px;
|
||||
}
|
||||
::v-deep .el-form-item__label-wrap{
|
||||
margin-left: 21px !important;
|
||||
}
|
||||
::v-deep .el-select__wrapper{
|
||||
margin-left: 20px;
|
||||
width: 330px;
|
||||
}
|
||||
::v-deep .el-input__wrapper{
|
||||
margin-left: 20px;
|
||||
width: 333px;
|
||||
}
|
||||
::v-deep .el-form-item__content{
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner{
|
||||
margin-left: 20px;
|
||||
width: 333px;
|
||||
|
||||
}
|
||||
::v-deep .el-form-item__content{
|
||||
width: 350px;
|
||||
}
|
||||
::v-deep .el-radio-group{
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::v-deep .el-form-item{
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
::v-deep .avatar-uploader .el-upload{
|
||||
margin: 20px 0 20px 20px;
|
||||
}
|
||||
.p{
|
||||
font-family: PingFangSC;
|
||||
font-size: 11px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
}
|
||||
.jp1{
|
||||
width: 320px;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.h{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 10px;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
/* margin-top: 30px; */
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
width:800px;
|
||||
}
|
||||
.title-item{
|
||||
width:62px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
.responsibility[data-v-f270821d] {
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 997px) {
|
||||
.ContactUs-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style >
|
||||
.avatar-uploader .el-upload {
|
||||
margin: 20px 0 20px 99px;
|
||||
/* border: 1px dashed var(--el-border-color); */
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
333
src/view/problem.vue
Normal file
333
src/view/problem.vue
Normal file
@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<div id="ContactUs">
|
||||
<img class="bank1" src="@/assets/img/bd7.png" alt="" />
|
||||
<div class="box">
|
||||
<div class="problem">
|
||||
<div class="pet">
|
||||
<img class="q" src="@/assets/img/q.png" alt="" />
|
||||
<span class="m">你的宠物美容师有证书吗？</span>
|
||||
</div>
|
||||
<div class="beauty">
|
||||
<p class="me">我们的美容师都是经验丰富的专业人士，但认证要求可能有所不同。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem">
|
||||
<div class="pet">
|
||||
<img class="q" src="@/assets/img/q.png" alt="" />
|
||||
<span class="m">我可以直接和我的美容师沟通吗？</span>
|
||||
</div>
|
||||
<div class="beauty">
|
||||
<p class="me">是的，通过我们的小程序与您的美容帅沟通现在是可以的。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem">
|
||||
<div class="pet">
|
||||
<img class="q" src="@/assets/img/q.png" alt="" />
|
||||
<span class="m">如果我想取消怎么办？</span>
|
||||
</div>
|
||||
<div class="beauty">
|
||||
<p class="me">查看我们的小程序的取消政策以了解详细信息。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem">
|
||||
<div class="pet">
|
||||
<img class="q" src="@/assets/img/q.png" alt="" />
|
||||
<span class="m">你们的洗护服务中,会为猫咪提供药浴吗?</span>
|
||||
</div>
|
||||
<div class="beauty">
|
||||
<p class="me">药浴暂不提供。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem">
|
||||
<div class="pet">
|
||||
<img class="q" src="@/assets/img/q.png" alt="" />
|
||||
<span class="m">我可以在哪里找到预约费用的明细？</span>
|
||||
</div>
|
||||
<div class="beauty">
|
||||
<p class="me">您可以在提交订单之前查看您的预约费用明细，并在洗护完成后收到订单确认。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem">
|
||||
<div class="pet">
|
||||
<img class="q" src="@/assets/img/q.png" alt="" />
|
||||
<span class="m">如果我的宠物只需要修剪指甲，我可以单独预定吗？？</span>
|
||||
</div>
|
||||
<div class="beauty">
|
||||
<p class="me">不，我们是一站式服务。如果剪造型，剪指甲等单项服务内容，都暂未上线。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem">
|
||||
<div class="pet">
|
||||
<img class="q" src="@/assets/img/q.png" alt="" />
|
||||
<span class="m">我在订单信息中没有看到修毛，你们提供这种服务吗？</span>
|
||||
</div>
|
||||
<div class="beauty">
|
||||
<p class="me">修毛和其它基础单项服务内容是包含在洗护流程里的;在预定时建议核查。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem">
|
||||
<div class="pet">
|
||||
<img class="q" src="@/assets/img/q.png" alt="" />
|
||||
<span class="m">为什么预订时要预先收费？</span>
|
||||
</div>
|
||||
<div class="beauty">
|
||||
<p class="me">为了确保您的预订，我们会在您要求时收取费用。预约可在约定时问前退款，但相对应会在一定时间段扣除手续费。现场单是不存在退款的。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem">
|
||||
<div class="pet">
|
||||
<img class="q" src="@/assets/img/q.png" alt="" />
|
||||
<span class="m">我应该采取什么步骤来预定宠物美容服务？</span>
|
||||
</div>
|
||||
<div class="beauty">
|
||||
<p class="me">在我们的Wagoo小程序上创建一个账户，添加您的宠物的个人资料和服务地址，然后点击“预定”。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="ContactUs">
|
||||
import WOW from 'wow.js'
|
||||
import { onMounted } from 'vue'
|
||||
import { reactive, ref } from 'vue';
|
||||
const itemValu = ref('前端开发')
|
||||
|
||||
// 百度地图BMap构造函数
|
||||
let BMap = null
|
||||
const navList = [
|
||||
{
|
||||
name: '前端开发',
|
||||
},
|
||||
{
|
||||
name: '后端开发',
|
||||
},
|
||||
{
|
||||
name: '测试工程',
|
||||
},
|
||||
{
|
||||
name: 'ul设计',
|
||||
},
|
||||
{
|
||||
name: '产品经理',
|
||||
},
|
||||
{
|
||||
name: '项目经理',
|
||||
}
|
||||
];
|
||||
onMounted(() => {
|
||||
// BMap = window.BMap
|
||||
// var map = new BMap.Map('map') // 创建地图实例
|
||||
// var point = new BMap.Point(114.54591657517, 30.496032878104) // 创建点坐标
|
||||
// map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
|
||||
// map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
|
||||
// var marker = new BMap.Marker(point) // 创建标注
|
||||
// map.addOverlay(marker) // 将标注添加到地图中
|
||||
// var opts = {
|
||||
// width: 50, // 信息窗口宽度
|
||||
// height: 10, // 信息窗口高度
|
||||
// title: '武汉XXX公司' // 信息窗口标题
|
||||
// }
|
||||
// var infoWindow = new BMap.InfoWindow(
|
||||
// `<span>地址：武汉市东湖高新技术开发区，马蹄莲<span>
|
||||
// <br>
|
||||
// <span>联系方式：423</span>`,
|
||||
// opts
|
||||
// ) // 创建信息窗口对象
|
||||
// map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口
|
||||
// var wow = new WOW()
|
||||
// wow.init()
|
||||
})
|
||||
function submitForm() {
|
||||
window.open(
|
||||
'https://neveryu.github.io/web-bookmarks/interview/',
|
||||
'web-bookmarks'
|
||||
)
|
||||
}
|
||||
function titlecli(item){
|
||||
itemValu.value = item.name
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.box{
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pet{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.beauty{
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background: #FFF9FC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.me{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.m{
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.q{
|
||||
width: 14px;
|
||||
height: 18px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.title{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.responsibility{
|
||||
width: 70%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
.beauty{
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background: #FFF9FC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.p{
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 37%;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.h{
|
||||
width: 110%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.banner {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
background-image: url('../assets/img/banner_1.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: scroll;
|
||||
background-position: center center;
|
||||
}
|
||||
.ContactUs-container {
|
||||
padding: 80px 0;
|
||||
transition: all ease 0.5s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 365px;
|
||||
}
|
||||
.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
.bank1{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
content: url('@/assets/img/sj7.png');
|
||||
}
|
||||
.box{
|
||||
width: 88%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.p{
|
||||
font-family: PingFangSC;
|
||||
font-size: 11px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.j{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
}
|
||||
.jp1{
|
||||
width: 320px;
|
||||
}
|
||||
.j1{
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #FF19A0;
|
||||
cursor: pointer;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.h{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #FF19A0;
|
||||
margin-top: 10px;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
/* margin-top: 30px; */
|
||||
}
|
||||
.title2{
|
||||
display: flex;
|
||||
width:800px;
|
||||
}
|
||||
.title-item{
|
||||
width:62px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
.responsibility[data-v-f270821d] {
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 997px) {
|
||||
.ContactUs-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user