This commit is contained in:
hezhengao
parent
6318199c53
commit
ed4e925814
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,55 @@
|
|||
{
|
||||
"name": "my-vue3-project",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.2",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.7.6",
|
||||
"swiper": "^8.4.7",
|
||||
"vue": "^3.2.13",
|
||||
"vue-awesome-swiper": "^5.0.1",
|
||||
"vue-baidu-map-3x": "^1.0.39",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"postcss-px-to-viewport": "^1.1.1",
|
||||
"sass": "^1.77.6",
|
||||
"sass-loader": "^14.2.1",
|
||||
"style-loader": "^4.0.0",
|
||||
"wowjs": "^1.1.3"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
|
||||
module.exports = {
|
||||
// 其他配置...
|
||||
plugins: {
|
||||
'postcss-px-to-viewport': {
|
||||
viewportWidth: 1920, // 设计稿宽度
|
||||
unitToConvert: 'px', // 需要转换的单位，默认为"px"
|
||||
viewportUnit: 'vw', // 转换后的单位，默认为"vw"
|
||||
selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换的类名
|
||||
minPixelValue: 1, // 最小的转换单位值
|
||||
mediaQuery: true, // 控制是否允许将媒体查询中的 px 单位进行转换为 vw/vh 单位。
|
||||
exclude: [/(\/|\\)(node_modules)(\/|\\)/] // 排除第三方模块中的样式
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>logo.png">
|
||||
<title>江苏新元素数字科技有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div style="position: relative;overflow: hidden;">
|
||||
<div style="margin-left: 10vw;">
|
||||
<topList></topList>
|
||||
</div>
|
||||
|
||||
<router-view> </router-view>
|
||||
|
||||
<div style="margin-left: 12.5vw;">
|
||||
<homeBottom></homeBottom>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<phoneBar></phoneBar>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import homeBottom from '@/components/homeBottom.vue'
|
||||
import topList from '@/components/topList.vue'
|
||||
|
||||
import phoneBar from './components/phonebar.vue'
|
||||
export default {
|
||||
components: {
|
||||
topList,
|
||||
homeBottom,
|
||||
phoneBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show3: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// console.log('---log----',localStorage.getItem('text'));
|
||||
}
|
||||
,
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { createApp } from 'vue';
|
||||
|
||||
const eventBus = createApp({});
|
||||
|
||||
eventBus.config.globalProperties.$on = eventBus.config.globalProperties.$on || function () {};
|
||||
eventBus.config.globalProperties.$emit = eventBus.config.globalProperties.$emit || function () {};
|
||||
|
||||
export default eventBus;
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import axios from 'axios'
|
||||
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
|
||||
const service = axios.create({
|
||||
baseURL: process.env.VUE_APP_BASE_API,
|
||||
timeout: 5000
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
// 添加请求头等前置处理
|
||||
config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
// 请求错误处理
|
||||
console.log('Request Error:', error)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(
|
||||
response => {
|
||||
// 响应后处理
|
||||
if (response.status === 200 && response.data.code === 200) {
|
||||
return Promise.resolve(response.data.data)
|
||||
} else {
|
||||
return Promise.reject(response.data)
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log('Response Error:', error)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default service
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><title>江苏新元素数字科技有限公司</title><script defer="defer" src="/js/chunk-vendors.1e43052c.js"></script><script defer="defer" src="/js/app.f563c152.js"></script><link href="/css/chunk-vendors.78f21824.css" rel="stylesheet"><link href="/css/app.e9aff9aa.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but my-vue3-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><title>江苏新元素数字科技有限公司</title><script defer="defer" src="/js/chunk-vendors.1e43052c.js"></script><script defer="defer" src="/js/app.f563c152.js"></script><link href="/css/chunk-vendors.78f21824.css" rel="stylesheet"><link href="/css/app.e9aff9aa.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but my-vue3-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><title>江苏新元素数字科技有限公司</title><script defer="defer" src="/js/chunk-vendors.1e43052c.js"></script><script defer="defer" src="/js/app.f563c152.js"></script><link href="/css/chunk-vendors.78f21824.css" rel="stylesheet"><link href="/css/app.e9aff9aa.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but my-vue3-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 底部 -->
|
||||
<div class="bottom_1">
|
||||
<div style="" class="bottom_2">
|
||||
<div class="bottom_left">
|
||||
<div style="" class="bottom_3">
|
||||
<div class="bottom_4">
|
||||
</div>
|
||||
<span style=" color:#b5b5b5;font-size: 0.7vw;"> 业务电话：0518/ </span> <span
|
||||
style="font-size: 1vw;color: #3498db;">81883980</span>
|
||||
</div>
|
||||
|
||||
<div style="" class="bottom_5">
|
||||
<div class="bottom_6" style="">
|
||||
</div>
|
||||
<span style=" color:#b5b5b5;font-size: 0.7vw;"> 业务QQ：2020674551</span>
|
||||
</div>
|
||||
|
||||
<div style="" class="bottom_7">
|
||||
<div class="bottom_8" style="">
|
||||
</div>
|
||||
<span style=" color:#b5b5b5;font-size: 0.7vw;"> E-mail：jsxys@jsxinyuansu.com </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bottom_9" style="">
|
||||
<img src="../assets/img/eriweima.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="" class="bottom_10">
|
||||
<div class="bottom_11" style="">Copyright © 2013-2020 江苏新元素数字科技有限公司</div>
|
||||
<div class="bottom_12">苏公网安备 32070402010023号 苏ICP备11042316号-1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'homeBottom'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom_1 {
|
||||
width: 75vw;
|
||||
height: 20vh;
|
||||
background-color: #333333;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.bottom_2 {
|
||||
width: 15vw;
|
||||
height: 20vh;
|
||||
margin-left: 15vw
|
||||
}
|
||||
|
||||
.bottom_3 {
|
||||
|
||||
width: 15vw;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom_4 {
|
||||
width: 1.5vw;
|
||||
height: 3.2vh;
|
||||
background-image: url(./../assets/img/dianhua.png);
|
||||
background-size: cover;
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.bottom_left {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
.bottom_5 {
|
||||
width: 15vw;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom_6 {
|
||||
width: 1.5vw;
|
||||
height: 3.2vh;
|
||||
background-image: url(../assets/img/qq.png);
|
||||
background-size: cover;
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.bottom_7 {
|
||||
width: 15vw;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom_8 {
|
||||
width: 1.5vw;
|
||||
height: 3.2vh;
|
||||
background-image: url(../assets/img/youxiang.png);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.bottom_9 {
|
||||
|
||||
width: 7.4vw;
|
||||
height: 15.5vh;
|
||||
background-color: #fff;
|
||||
margin-left: 15vw;
|
||||
margin-top: 2vh;
|
||||
background-image: url();
|
||||
background-size: cover;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_10 {
|
||||
width: 75vw;
|
||||
height: 4vh;
|
||||
background-color: #242424;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bottom_11 {
|
||||
|
||||
width: 30vw;
|
||||
color: #b5b5b5;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 0.7vw;
|
||||
margin-left: 15vw;
|
||||
}
|
||||
|
||||
.bottom_12 {
|
||||
font-size: 0.7vw;
|
||||
height: 4vh;
|
||||
color: #b5b5b5;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left:-2vw;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div style="position: relative;">
|
||||
|
||||
<div class="topbanr">
|
||||
|
||||
<div class="vx_img" @mouseover="showBox" @mouseleave="hideBox">
|
||||
<img src="../assets/img/weixing.png">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="wxqipao" v-if="show">
|
||||
<img src="../assets/img/eriweima.png" alt="">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="phone_img" >
|
||||
<img src="../assets/img/phone.png" alt="">
|
||||
<p>0518/81883980</p>
|
||||
</div>
|
||||
|
||||
<div style="width: 4vw;height: 7vh;" @click="totop">
|
||||
<img src="../assets/img/dingbu.png" alt="" style="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'phoneBar',
|
||||
data() {
|
||||
return {
|
||||
show:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
totop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth' // 平滑滚动
|
||||
});
|
||||
},
|
||||
showBox(){
|
||||
this.show=true
|
||||
},
|
||||
hideBox(){
|
||||
this.show=false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.topbanr {
|
||||
|
||||
position: fixed;
|
||||
/* 设置为固定定位 */
|
||||
right: -7.2vw;
|
||||
/* 距离右边框20px */
|
||||
bottom: 15vh;
|
||||
/* 距离顶部20px，可以根据需要调整 */
|
||||
|
||||
}
|
||||
|
||||
.wxqipao {
|
||||
width: 5vw;
|
||||
height: 10vh;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -7.5vw;
|
||||
z-index: 999
|
||||
}
|
||||
|
||||
.phone_img {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 10vw;
|
||||
background-color: #333333;
|
||||
transition: transform 0.8s;
|
||||
border-bottom: 1px solid #fff;
|
||||
|
||||
img {
|
||||
// width: 3vw;
|
||||
// height: 6vh;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateX(-7vw)
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8vw;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.vx_img {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 10vw;
|
||||
background-color: #333333;
|
||||
transition: transform 0.8s;
|
||||
border-bottom: 1px solid #fff;
|
||||
|
||||
img {
|
||||
// width: 3vw;
|
||||
// height: 6vh;
|
||||
}
|
||||
}
|
||||
|
||||
.transition-box {
|
||||
background-color: black;
|
||||
width: 10vw;
|
||||
height: 4vh;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 1.2vw;
|
||||
line-height: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="fath">
|
||||
<el-carousel height="44vh" :interval="3000" motion-blur autoplay>
|
||||
<el-carousel-item v-for="item in picture" :key="item.img" style="height: 44vh;width: 75vw;">
|
||||
<img :src="item.img" alt="" style="width: 100%; height: 100%;object-fit: cover;">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'carouselBar',
|
||||
data() {
|
||||
return {
|
||||
picture: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getImgList()
|
||||
},
|
||||
methods: {
|
||||
getImgList() {
|
||||
|
||||
this.$http.get(`/door/getImgList`,{params:{imgCat:0}}).then(res => {
|
||||
for (let i=0;i<res.data.rows.length;i++){
|
||||
const img=`${this.$baseUrl}${res.data.rows[i].imgUrl}`
|
||||
this.picture.push({img:img});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fath{
|
||||
margin-top: 0.5vh;width: 75vw;
|
||||
margin-left: 2.5vw;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="height: 7vh;margin-left: 10vw;display: flex;margin-top: 3vh;padding-top: 1vh;">
|
||||
<div class="top-left"> </div>
|
||||
<div style="margin-left: 10vw;">
|
||||
<el-tabs class="demo-tabs" @tab-change="handerjieshao" v-model="activeName">
|
||||
<el-tab-pane label="123" name="首页">
|
||||
<template #label>
|
||||
<span class="two-lines">首页<br>Home</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="公司简介" name="公司简介">
|
||||
<template #label>
|
||||
<span class="two-lines">公司简介<br>About</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="新闻动态" name="新闻动态">
|
||||
<template #label>
|
||||
<span class="two-lines">新闻动态<br>News</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="解决方案" name="解决方案">
|
||||
<template #label>
|
||||
<span class="two-lines">产品与行业解决方案<br>Products-Solutions</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="案例欣赏" name="案例欣赏">
|
||||
<template #label>
|
||||
<span class="two-lines">通用产品与服务<br>Products-Service</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="诚聘英才" name="诚聘英才">
|
||||
<template #label>
|
||||
<span class="two-lines">诚聘英才<br>Recruit</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="联系我们" name="联系我们">
|
||||
<template #label>
|
||||
<span class="two-lines">联系我们<br>Contact</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'topList',
|
||||
data() {
|
||||
return {
|
||||
// 当前选中
|
||||
activeName: '首页'
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.activeName = localStorage.getItem('text') || '首页';
|
||||
if (this.activeName == '首页') {
|
||||
this.$router.push('/')
|
||||
}
|
||||
localStorage.removeItem('text');
|
||||
},
|
||||
created() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
handerjieshao(name) {
|
||||
console.log('------------',name);
|
||||
|
||||
if (name == '首页') {
|
||||
this.$router.push({ name: 'homeComponent' })
|
||||
localStorage.setItem('text', '首页')
|
||||
}
|
||||
if (name == '公司简介') {
|
||||
this.$router.push({ name: 'jieShao' })
|
||||
}
|
||||
if (name == '新闻动态') {
|
||||
this.$router.push({ name: 'dongTai' })
|
||||
}
|
||||
if (name == '案例欣赏') {
|
||||
const id = localStorage.getItem('id')
|
||||
const articleCat = localStorage.getItem('articleCat')
|
||||
this.$router.push({ name: 'anLi', query: { id: id, articleCat: articleCat } });
|
||||
}
|
||||
if (name == '解决方案') {
|
||||
const nextid=localStorage.getItem('nextid')
|
||||
this.$router.push({ name: 'fangAn', query: { id: nextid} });
|
||||
|
||||
}
|
||||
if (name == '诚聘英才') {
|
||||
this.$router.push({ name: 'zhaoPing' })
|
||||
}
|
||||
if (name == '联系我们') {
|
||||
this.$router.push({ name: 'gsPhone' })
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.top-left {
|
||||
// background-color: red;
|
||||
width: 9vw;
|
||||
height: 6vh;
|
||||
background-image: url('../assets/img/logo.png');
|
||||
background-size: contain;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.el-tabs {
|
||||
width: 43vw;
|
||||
}
|
||||
|
||||
.demo-tabs>.el-tabs__content {
|
||||
color: #6b778c;
|
||||
border-bottom: none;
|
||||
|
||||
}
|
||||
|
||||
.el-tabs__item.is-top {
|
||||
text-align: center;
|
||||
font-size: 0.7vw;
|
||||
/* 设置标签字体大小为16px，根据需要调整 */
|
||||
font-weight: 400;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
opacity: 0.75;
|
||||
line-height: 150px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { createApp } from 'vue';
|
||||
|
||||
const eventBus = createApp({});
|
||||
|
||||
eventBus.config.globalProperties.$on = eventBus.config.globalProperties.$on || function () {};
|
||||
eventBus.config.globalProperties.$emit = eventBus.config.globalProperties.$emit || function () {};
|
||||
|
||||
export default eventBus;
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
import router from "./router/index"
|
||||
import axios from 'axios'
|
||||
import BaiduMap from 'vue-baidu-map-3x'
|
||||
// import Quill from "quill";
|
||||
import '.store/quill@1.3.7/node_modules/quill/dist/quill.bubble.css'
|
||||
import '.store/quill@1.3.7/node_modules/quill/dist/quill.snow.css'
|
||||
import '.store/quill@1.3.7/node_modules/quill/dist/quill.bubble.css'
|
||||
import "animate.css"
|
||||
const baseUrl = 'http://admin.jsxinyuansu.com/prod-api'
|
||||
axios.defaults.baseURL = baseUrl
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// window.scrollTo(0, 0);
|
||||
// next();
|
||||
// });
|
||||
var app = createApp(App)
|
||||
app.use(BaiduMap, {
|
||||
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
|
||||
ak: 'ZIr5htXn8Sh4Ks9wbIMDhFAZKHZUCldR',
|
||||
// v:'2.0', // 默认使用3.0
|
||||
// type: 'WebGL' // ||API 默认API (使用此模式 BMap=BMapGL)
|
||||
});
|
||||
app.config.globalProperties.$http=axios
|
||||
app.config.globalProperties.$baseUrl=baseUrl
|
||||
app.use(ElementPlus,{
|
||||
locale: zhCn,
|
||||
})
|
||||
app.use('Quill')
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { createRouter, createWebHistory } from "vue-router"
|
||||
import routes from "./routes"
|
||||
var router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
export default router
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
import homeComponent from '@/views/index.vue'
|
||||
import jieShao from '@/views/homepage/gsjieshao.vue'
|
||||
import dongTai from '@/views/homepage/gsdongtai.vue'
|
||||
import anLi from '@/views/homepage/gsanli.vue'
|
||||
import numSchool from '@/views/homepage/numschool.vue'
|
||||
import wisdomPlay from '@/views/homepage/wisdomPlay.vue'
|
||||
import culturalDesign from '@/views/homepage/culturalDesign.vue'
|
||||
import governmentInfo from '@/views/homepage/governmentInfo.vue'
|
||||
import fangAn from '@/views/homepage/gsfangan.vue'
|
||||
import zhaoPing from '@/views/homepage/gszhaoping.vue'
|
||||
import gsPhone from '@/views/homepage/gsPhone.vue'
|
||||
import gsyeWu from '@/views/homepage/gsyeWu.vue'
|
||||
import gstuanDui from '@/views/homepage/gstuanDui.vue'
|
||||
import gsziZhi from '@/views/homepage/gsziZhi.vue'
|
||||
import gswenHua from '@/views/homepage/gswenHua.vue'
|
||||
import dongtaiText from '@/views/homepage/dongtaiText.vue'
|
||||
import gsjiShu from '@/views/homepage/gsjiShu.vue'
|
||||
const routes = [
|
||||
{
|
||||
// 首页
|
||||
path: "/",
|
||||
name:'homeComponent',
|
||||
component: homeComponent
|
||||
},
|
||||
{
|
||||
// 公司简介
|
||||
path: "/jieShao",
|
||||
name:'jieShao',
|
||||
component: jieShao
|
||||
},
|
||||
{
|
||||
// 公司简介-业务
|
||||
path: "/gsyeWu",
|
||||
name:'gsyeWu',
|
||||
component: gsyeWu
|
||||
},
|
||||
{
|
||||
// 公司简介-团队
|
||||
path: "/gstuanDui",
|
||||
name:'gstuanDui',
|
||||
component: gstuanDui
|
||||
},
|
||||
{
|
||||
// 公司简介-资质
|
||||
path: "/gsziZhi",
|
||||
name:'gsziZhi',
|
||||
component: gsziZhi
|
||||
},
|
||||
{
|
||||
// 公司简介-技术
|
||||
path: "/gsjiShu",
|
||||
name:'gsjiShu',
|
||||
component: gsjiShu
|
||||
},
|
||||
{
|
||||
// 公司简介-文化
|
||||
path: "/gswenHua",
|
||||
name:'gswenHua',
|
||||
component: gswenHua
|
||||
},
|
||||
|
||||
{
|
||||
// 新闻动态
|
||||
path: "/dongTai",
|
||||
name:'dongTai',
|
||||
component: dongTai
|
||||
},
|
||||
{
|
||||
// 新闻动态-详情
|
||||
path: "/dongtaiText",
|
||||
name:'dongtaiText',
|
||||
component: dongtaiText
|
||||
},
|
||||
{
|
||||
// 案例欣赏
|
||||
path: "/anLi",
|
||||
name:'anLi',
|
||||
component: anLi
|
||||
},
|
||||
{
|
||||
// 数智校园
|
||||
path: "/numSchool",
|
||||
name:'numSchool',
|
||||
component: numSchool
|
||||
},
|
||||
{
|
||||
// 智慧旅游
|
||||
path: "/wisdomPlay",
|
||||
name:'wisdomPlay',
|
||||
component: wisdomPlay
|
||||
},
|
||||
{
|
||||
// 文创设计
|
||||
path: "/culturalDesign",
|
||||
name:'culturalDesign',
|
||||
component: culturalDesign
|
||||
},
|
||||
{
|
||||
// 政企信息系统
|
||||
path: "/governmentInfo",
|
||||
name:'governmentInfo',
|
||||
component: governmentInfo
|
||||
},
|
||||
{
|
||||
// 解决方案
|
||||
path: "/fangAn",
|
||||
name:'fangAn',
|
||||
component: fangAn
|
||||
},
|
||||
{
|
||||
// 诚聘英才
|
||||
path: "/zhaoPing",
|
||||
name:'zhaoPing',
|
||||
component: zhaoPing
|
||||
},
|
||||
{
|
||||
// 联系我们
|
||||
path: "/gsPhone",
|
||||
name:'gsPhone',
|
||||
component: gsPhone
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
export default routes;
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<template>
|
||||
<div style="" class="anli_1">
|
||||
<div style="" class="anli_2">
|
||||
<topBar></topBar>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div style="" class="anli_3">
|
||||
<div style=" " class="anli_4">文创设计
|
||||
</div>
|
||||
<div style="" class="anli_5">
|
||||
在文创设计领域，新元素积累了丰富而宝贵的文创设计经验，在海报设计、画册设计、广告设计、标识设计、新媒体设计制作和动画制作等方面都有相当成熟的案例。
|
||||
</div>
|
||||
<img style="" class="anli_6" src="http://www.jsxinyuansu.com/statics/gongsi/images/llwz.png" alt="">
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="anli_7" style="">
|
||||
<button class="left" id="anli_8" style="" @click="plusSlides(-1)">
|
||||
</button>
|
||||
<div class="anli_9" style="">
|
||||
|
||||
<div class="slideshow">
|
||||
<div class="slides">
|
||||
<!-- <img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915102712229.png" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915102823514.png" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915102903996.jpg" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915102903996.jpg" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button class="left" id="anli_10" style="" @click="plusSlides(1)">
|
||||
</button>
|
||||
</div>
|
||||
<div class="anli_11" style="">
|
||||
<button class="left" @click="handerback">上一篇：智慧旅游服务产品</button>
|
||||
<button class="left" @click="handerto">下一篇：政企信息系统</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'culturalDesign',
|
||||
components: {
|
||||
topBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 轮播事件
|
||||
plusSlides(n) {
|
||||
const slides = document.querySelector('.slides');
|
||||
const slideWidth = slides.clientWidth / 4;
|
||||
this.slideIndex = (this.slideIndex + n + 4) % 4;
|
||||
slides.style.transform = `translateX(-${this.slideIndex * slideWidth}px)`;
|
||||
},
|
||||
// 下一篇跳转路由
|
||||
handerto(){
|
||||
this.$router.push({name:'governmentInfo'})
|
||||
},
|
||||
handerback(){
|
||||
this.$router.push({name:'culturalDesign'})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
background-color: #fff;
|
||||
/* 平滑放大效果 */
|
||||
}
|
||||
|
||||
.left:hover {
|
||||
transform: scale(1.1);
|
||||
/* 放大至1.1倍原大小 */
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
|
||||
width: 35.4vw;
|
||||
height: 42vh;
|
||||
margin-top: 2.8vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
width: 400%;
|
||||
height: 100%;
|
||||
/* 4张图片，每张占25% */
|
||||
|
||||
}
|
||||
|
||||
.slides img {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.anli_1 {
|
||||
padding-left: 10vw;
|
||||
|
||||
.anli_2 {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
.anli_3 {
|
||||
width: 60vw;
|
||||
height: 300px;
|
||||
margin-left: 10vw;
|
||||
margin-top: 6vh;
|
||||
}
|
||||
|
||||
.anli_4 {
|
||||
text-align: center;
|
||||
height: 6vh;
|
||||
line-height: 6vh;
|
||||
color: #4a4a4a;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.anli_5 {
|
||||
color: #757272;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
margin-top: 20px;
|
||||
text-indent: 26px;
|
||||
}
|
||||
|
||||
.anli_6 {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
margin-top: 3vh;
|
||||
display: block;
|
||||
margin-bottom: 6vh;
|
||||
}
|
||||
|
||||
.anli_7 {
|
||||
width: 70vw;
|
||||
height: 60vh;
|
||||
margin-left: 5vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
#anli_8 {
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/alzuo.png);
|
||||
height: 12vh;
|
||||
width: 3vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.anli_9 {
|
||||
width: 40vw;
|
||||
height: 60vh;
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/anlik1.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#anli_10 {
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/alyou.png);
|
||||
height: 12vh;
|
||||
width: 3vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.anli_11 {
|
||||
width: 40vw;
|
||||
height: 5vh;
|
||||
margin-left: 20vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8vh;
|
||||
margin-bottom: 8vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div class="anli_1">
|
||||
<div style="" class="anli_2">
|
||||
<topBar></topBar>
|
||||
</div>
|
||||
|
||||
<div class="text3">
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="time">
|
||||
<span class="timestyle">{{ time }}</span>
|
||||
</div>
|
||||
<div v-html="htmltext" class="ql-editor"></div>
|
||||
|
||||
<div class="bottom">
|
||||
<span class="left" @click="handerto">下一篇： <span style="color: #4b4949; font-size: 14px;cursor: pointer;">{{ xiayipian }}</span> </span>
|
||||
<div class="btstyle" @click="handerback">返回列表</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import topBar from '@/components/topBar.vue'
|
||||
export default {
|
||||
name: 'dongtaiText',
|
||||
components: {
|
||||
topBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nextid:'',
|
||||
id: '',
|
||||
htmltext: '',
|
||||
title: '',
|
||||
xiayipian: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = this.$route.query.id
|
||||
|
||||
this.gettext()
|
||||
|
||||
|
||||
this.getnextlist()
|
||||
|
||||
},
|
||||
methods: {
|
||||
//获取列表
|
||||
gettext() {
|
||||
this.$http.get(`/door/getArticle/${this.id}`,).then(res => {
|
||||
console.log(res, 'pp');
|
||||
this.total = res.data.data.total
|
||||
this.title = res.data.data.title
|
||||
this.time = res.data.data.createTime
|
||||
this.htmltext = res.data.data.content
|
||||
})
|
||||
},
|
||||
//下一篇跳转
|
||||
handerto(){
|
||||
localStorage.setItem('text', '新闻动态')
|
||||
|
||||
window.open(this.$router.resolve({ path: '', query: { id: this.nextid } }).href, '_blank');
|
||||
// window.open(this.$router.resolve({ path: 'dongtaiText', query: { id: this.nextid } }).href, '_blank');
|
||||
},
|
||||
//获取下一篇的字段
|
||||
getnextlist() {
|
||||
const text = {
|
||||
id: this.id,
|
||||
articleCat: 7
|
||||
}
|
||||
this.$http.get('/door/getNext/', { params: text }).then(res => {
|
||||
console.log(res, 'ggyyy');
|
||||
if (res.data.data) {
|
||||
this.xiayipian = res.data.data.title
|
||||
this.nextid= res.data.data.id
|
||||
} else {
|
||||
this.xiayipian = ''
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
handerback() {
|
||||
this.$router.push({ name: 'dongTai' })
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.anli_1 {
|
||||
padding-left: 10vw;
|
||||
|
||||
.anli_2 {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
.text3 {
|
||||
padding-top: 8vh;
|
||||
width: 75vw;
|
||||
margin-left: 2.5vw;
|
||||
background-color: #edf2f6;
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 5vh;
|
||||
|
||||
|
||||
text-align: center;
|
||||
|
||||
line-height: 5vh;
|
||||
color: #4a4a4a;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 100%;
|
||||
height: 5vh;
|
||||
line-height: 4vh;
|
||||
position: relative;
|
||||
|
||||
.timestyle {
|
||||
font-size: 14px;
|
||||
color: #4a4a4a;
|
||||
position: absolute;
|
||||
right: 25vw;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding-left: 10vw;
|
||||
width: 80%;
|
||||
height: 7vh;
|
||||
|
||||
}
|
||||
|
||||
.left {
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btstyle {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
width: 116px;
|
||||
height: 40px;
|
||||
background: #1f5299;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
color: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.h-html {
|
||||
text-indent: 2em;
|
||||
padding-left: 6vw;
|
||||
padding-right: 5vw;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
<template>
|
||||
<div style="" class="anli_1">
|
||||
<div style="" class="anli_2">
|
||||
<topBar></topBar>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div style="" class="anli_3">
|
||||
<div style=" " class="anli_4">政企信息系统
|
||||
</div>
|
||||
<div style="" class="anli_5">
|
||||
新元素多年在政企行业积累的产品技术经验，为政务信息化、社会信息化、产业信息化提供一整套行之有效的互联网软件及大数据的解决方案。 办公自动化（OA）系统、在线宣教学平台、重点工业项目建设推进信息平台、重大项目代办服务平台、信息库综合查询服务系统、应用系统订制研发、手机app系统订制研发等多个领域和地方政府探索可持续发展的建设、运营新模式，形成了以便于工作与管理为根本，为政企信息化建设降低成本，建设出特色，管理出成效。
|
||||
</div>
|
||||
<img style="" class="anli_6" src="http://www.jsxinyuansu.com/statics/gongsi/images/llwz.png" alt="">
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="anli_7" style="">
|
||||
<button class="left" id="anli_8" style="" @click="plusSlides(-1)">
|
||||
</button>
|
||||
<div class="anli_9" style="">
|
||||
|
||||
<div class="slideshow">
|
||||
<div class="slides">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915103244560.png" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915103903822.png" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915104200770.png" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915104322724.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button class="left" id="anli_10" style="" @click="plusSlides(1)">
|
||||
</button>
|
||||
</div>
|
||||
<div class="anli_11" style="">
|
||||
<button class="left" @click="handerback">上一篇：文创设计</button>
|
||||
<button class="left" >下一篇：最后 一篇</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'anLi',
|
||||
components: {
|
||||
topBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 轮播事件
|
||||
plusSlides(n) {
|
||||
const slides = document.querySelector('.slides');
|
||||
const slideWidth = slides.clientWidth / 4;
|
||||
this.slideIndex = (this.slideIndex + n + 4) % 4;
|
||||
slides.style.transform = `translateX(-${this.slideIndex * slideWidth}px)`;
|
||||
},
|
||||
// 下一篇跳转路由
|
||||
|
||||
handerback(){
|
||||
this.$router.push({name:'culturalDesign'})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
background-color: #fff;
|
||||
/* 平滑放大效果 */
|
||||
}
|
||||
|
||||
.left:hover {
|
||||
transform: scale(1.1);
|
||||
/* 放大至1.1倍原大小 */
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
|
||||
width: 35.4vw;
|
||||
height: 42vh;
|
||||
margin-top: 2.8vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
width: 400%;
|
||||
height: 100%;
|
||||
/* 4张图片，每张占25% */
|
||||
|
||||
}
|
||||
|
||||
.slides img {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.anli_1 {
|
||||
padding-left: 10vw;
|
||||
|
||||
.anli_2 {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
.anli_3 {
|
||||
width: 60vw;
|
||||
height: 300px;
|
||||
margin-left: 10vw;
|
||||
margin-top: 6vh;
|
||||
}
|
||||
|
||||
.anli_4 {
|
||||
text-align: center;
|
||||
height: 6vh;
|
||||
line-height: 6vh;
|
||||
color: #4a4a4a;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.anli_5 {
|
||||
color: #757272;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
margin-top: 20px;
|
||||
text-indent: 26px;
|
||||
}
|
||||
|
||||
.anli_6 {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
margin-top: 3vh;
|
||||
display: block;
|
||||
margin-bottom: 6vh;
|
||||
}
|
||||
|
||||
.anli_7 {
|
||||
width: 70vw;
|
||||
height: 60vh;
|
||||
margin-left: 5vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
#anli_8 {
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/alzuo.png);
|
||||
height: 12vh;
|
||||
width: 3vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.anli_9 {
|
||||
width: 40vw;
|
||||
height: 60vh;
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/anlik1.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#anli_10 {
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/alyou.png);
|
||||
height: 12vh;
|
||||
width: 3vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.anli_11 {
|
||||
width: 40vw;
|
||||
height: 5vh;
|
||||
margin-left: 20vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8vh;
|
||||
margin-bottom: 8vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="margin-left: 10vw;">
|
||||
<topBar></topBar>
|
||||
</div>
|
||||
|
||||
<!-- 主体 -->
|
||||
<div class="info">
|
||||
<div style="display: flex">
|
||||
<div>
|
||||
<!-- 标题 -->
|
||||
<div class="info-left">
|
||||
<p class="title-one">联系我们</p>
|
||||
<span class="title-two">Contact</span>
|
||||
</div>
|
||||
<!-- 电话那几个p标签 -->
|
||||
<div class="phone">
|
||||
<div class="phone-top">
|
||||
<div class="phone-list">
|
||||
<span>电话:</span>
|
||||
<p>0518-81883980</p>
|
||||
</div>
|
||||
|
||||
<div class="phone-list">
|
||||
<span>传真:</span>
|
||||
<p> 0518-81883980</p>
|
||||
</div>
|
||||
|
||||
<div class="phone-list">
|
||||
<span>邮件:</span>
|
||||
<p> jsxys@jsxinyuansu.com</p>
|
||||
</div>
|
||||
|
||||
<div class="phone-list">
|
||||
<span>网站:</span>
|
||||
<a href="www.jsxinyuansu.com"
|
||||
style="color: #551A8B;text-decoration:none">www.jsxinyuansu.com</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="phone-list">
|
||||
<p>
|
||||
<span style="width: 4vw;">地址:</span>
|
||||
|
||||
连云港市海州区朝阳东路32-6东盛阳光大厦A座3203 </p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 下半部分 -->
|
||||
<div class="phone-bottom">
|
||||
<div class="phone-list-1">
|
||||
|
||||
<span>Tel:</span>
|
||||
<p>0518-81883980</p>
|
||||
</div>
|
||||
|
||||
<div class="phone-list-1">
|
||||
<span style=" width: 3.5vw;">E-mail:</span>
|
||||
<p> jsxys@jsxinyuansu.com</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="phone-list-1">
|
||||
<p>
|
||||
<span style=" width: 4vw;">Address:</span>
|
||||
|
||||
3203, Building A, Dongsheng Sunshine Building, 32-6 East Chaoyang Road, Haizhou District, Lianyungang City
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="baidu" id="map">
|
||||
<baidu-map class="bm-view" :zoom="18" :center="{ lng: 119.218592, lat: 34.597625 }" ref="map">
|
||||
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
|
||||
<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
|
||||
<bm-marker :position="{ lng: 119.218592, lat: 34.597625 }" :dragging="true" @click="infoWindowOpen"
|
||||
animation="BMAP_ANIMATION_BOUNCE">
|
||||
<bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen"
|
||||
style=" font-size: 12px;padding-top: 1vh;">连云港市海州区朝阳东路32-6东盛阳光大厦A座3203</bm-info-window>
|
||||
<bm-label content="江苏新元素数字科技有限公司" :position="{ lng: 119.216592, lat: 34.57625 }" :offset="[0, 0]"
|
||||
:labelStyle="{ color: 'black', fontSize: '12px' }" title="Hover me" />
|
||||
</bm-marker>
|
||||
|
||||
</baidu-map>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'gsPhone',
|
||||
components: {
|
||||
topBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 确保map实例已经加载完成
|
||||
this.$nextTick(() => {
|
||||
// 获取map实例（这里假设你使用了ref="map"）
|
||||
|
||||
console.log(this.$refs.map, 'pppp')
|
||||
// if (!map) {
|
||||
// // 启用鼠标滚轮缩放（通常这是默认启用的，所以这行代码可能是多余的）
|
||||
// map.enableScrollWheelZoom(true);
|
||||
// }
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
infoWindowClose() {
|
||||
this.show = false
|
||||
},
|
||||
infoWindowOpen() {
|
||||
console.log(123456);
|
||||
this.show = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bm-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.baidu {
|
||||
width: 40vw;
|
||||
border: 0.2px solid #555555;
|
||||
margin-left: 5vw;
|
||||
height: 46vh;
|
||||
margin-top: 9vh;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-top: 5vh;
|
||||
width: 75vw;
|
||||
height: 70vh;
|
||||
background-color: #edf2f6;
|
||||
margin-left: 12.5vw;
|
||||
}
|
||||
|
||||
.title-one {
|
||||
font-size: 26px;
|
||||
color: #2A6DBB;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.title-two {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: #2A6DBB;
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
.info-left {
|
||||
margin-left: 8vw;
|
||||
}
|
||||
|
||||
.phone {
|
||||
margin-top: 4vh;
|
||||
margin-left: 9vw;
|
||||
width: 18vw;
|
||||
|
||||
}
|
||||
|
||||
.phone-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 180px;
|
||||
width: 20vw;
|
||||
// background-color: red;
|
||||
|
||||
}
|
||||
|
||||
.phone-bottom {
|
||||
margin-top: 5vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 120px;
|
||||
|
||||
// background-color:red;
|
||||
P {
|
||||
|
||||
// margin-left: 0.5vw;
|
||||
font-size: 16px;
|
||||
color: #888888;
|
||||
line-height: 26px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 3.5vw;
|
||||
font-size: 18px;
|
||||
color: #555555;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-list {
|
||||
height: 4vh;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
width: 3vw;
|
||||
color: #555555;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
.phone-list-1{
|
||||
height: 4vh;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
width: 2vw;
|
||||
color: #555555;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
anli_7<template>
|
||||
<div style="" class="anli_1">
|
||||
<div style="" class="anli_2">
|
||||
<topBar></topBar>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div style="" class="anli_3">
|
||||
<div class="anli_4">{{ title }} </div>
|
||||
<div v-html="content" class="anli_5"></div>
|
||||
<div class="anli_img"> <img style="" class="anli_6"
|
||||
src="../../assets/img/biaoti.png" alt=""></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="anli_7" style="">
|
||||
<button class="left" id="anli_8" style="" @click="prevSlide"> </button>
|
||||
<div class="anli_9">
|
||||
|
||||
|
||||
<el-carousel ref="carousel" trigger="click" arrow="never" indicator-position="none">
|
||||
<el-carousel-item v-for="item in anlilist" :key="item">
|
||||
<!-- <img :src="item" alt=""> -->
|
||||
<el-image preview-teleported style="width: 100%; height: 100%" :src="item" :zoom-rate="1.2" :max-scale="7"
|
||||
:min-scale="0.2" :preview-src-list="anlilist" :initial-index="4" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
||||
</div>
|
||||
<button class="left" id="anli_10" style="" @click="nextSlide">
|
||||
</button>
|
||||
</div>
|
||||
<div class="anli_11" style="">
|
||||
<button class="left" @click="handerup" :disabled="shangyipian === ''">上一篇：{{ shangyipian ? shangyipian :
|
||||
'暂无' }}</button>
|
||||
<button class="left" @click="handerto" :disabled="xiayipian === ''">下一篇：{{ xiayipian ? xiayipian : '暂无'
|
||||
}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'anLi',
|
||||
components: {
|
||||
topBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
xiayipian: '',
|
||||
shangyipian: '',
|
||||
nextid: '',//下一篇的id
|
||||
upid: '',//上一篇的id
|
||||
content: '',
|
||||
articleCat: '',
|
||||
title: '',
|
||||
idnum: '',
|
||||
slideIndex: 0,
|
||||
offset: 0,
|
||||
anlilist: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.idnum = this.$route.query.id
|
||||
this.articleCat = this.$route.query.articleCat
|
||||
this.getanli()
|
||||
this.getnextlist()
|
||||
this.getuplist()
|
||||
},
|
||||
methods: {
|
||||
//获取上一篇
|
||||
getuplist() {
|
||||
const text = {
|
||||
id: this.idnum,
|
||||
articleCat: this.articleCat
|
||||
}
|
||||
this.$http.get('/door/getUp/', { params: text }).then(res => {
|
||||
console.log(res, 'iiiuu');
|
||||
if (res.data.data) {
|
||||
this.shangyipian = res.data.data.title
|
||||
this.upid = res.data.data.id
|
||||
console.log(this.shangyipian, 'uuuu');
|
||||
} else {
|
||||
this.shangyipian = ''
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
//获取下一篇的字段
|
||||
getnextlist() {
|
||||
const text = {
|
||||
id: this.idnum,
|
||||
articleCat: this.articleCat
|
||||
}
|
||||
this.$http.get('/door/getNext/', { params: text }).then(res => {
|
||||
if (res.data.data) {
|
||||
this.xiayipian = res.data.data.title
|
||||
this.nextid = res.data.data.id
|
||||
|
||||
} else {
|
||||
this.xiayipian = ''
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
// 轮播事件
|
||||
prevSlide() {
|
||||
this.$refs.carousel.prev();
|
||||
},
|
||||
nextSlide() {
|
||||
this.$refs.carousel.next();
|
||||
},
|
||||
//获取列表
|
||||
getanli() {
|
||||
this.$http.get(`/door/getArticle/${this.idnum}`).then(res => {
|
||||
const anlilist = res.data.data.contentImg.split(',')
|
||||
for (let i = 0; i < anlilist.length; i++) {
|
||||
anlilist[i] = `${this.$baseUrl}${anlilist[i]}`
|
||||
this.anlilist.push(anlilist[i])
|
||||
}
|
||||
this.title = res.data.data.title
|
||||
this.content = res.data.data.content
|
||||
})
|
||||
},
|
||||
// 下一篇跳转路由
|
||||
handerto() {
|
||||
localStorage.setItem('text', '案例欣赏')
|
||||
window.open(this.$router.resolve({ path: 'anLi', query: { id: this.nextid, articleCat: this.articleCat } }).href, '_blank');
|
||||
|
||||
},
|
||||
handerup() {
|
||||
localStorage.setItem('text', '案例欣赏')
|
||||
window.open(this.$router.resolve({ path: 'anLi', query: { id: this.upid, articleCat: this.articleCat } }).href, '_blank');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-carousel__indicators {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left {
|
||||
font-size: 0.8vw;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
background-color: #fff;
|
||||
/* 平滑放大效果 */
|
||||
}
|
||||
|
||||
.left:hover {
|
||||
transform: scale3d(1.1, 1.1, 1);
|
||||
/* 放大至1.1倍原大小 */
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
background-color: green;
|
||||
|
||||
width: 38.5vw;
|
||||
height: 45vh;
|
||||
margin-top: 2.8vh;
|
||||
display: flex;
|
||||
transition: transform 0.5s ease;
|
||||
overflow: hidden;
|
||||
|
||||
/* 添加过渡效果 */
|
||||
img {
|
||||
width: 100%;
|
||||
margin-left: 4vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.anli_1 {
|
||||
padding-left: 10vw;
|
||||
width: 75vw;
|
||||
|
||||
.anli_2 {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
.anli_3 {
|
||||
|
||||
width: 60vw;
|
||||
|
||||
margin-left: 10vw;
|
||||
margin-top: 6vh;
|
||||
}
|
||||
|
||||
.anli_4 {
|
||||
text-align: center;
|
||||
height: 6vh;
|
||||
line-height: 6vh;
|
||||
color: #4a4a4a;
|
||||
font-size: 1.7vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.anli_5 {
|
||||
color: #757272;
|
||||
font-size: 0.9vw;
|
||||
line-height: 1.3vw;
|
||||
margin-top: 2vh;
|
||||
text-indent: 1.3vw;
|
||||
}
|
||||
|
||||
.anli_6 {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
margin-top: 3vh;
|
||||
display: block;
|
||||
margin-bottom: 6vh;
|
||||
}
|
||||
|
||||
.anli_7 {
|
||||
width: 70vw;
|
||||
height: 60vh;
|
||||
margin-left: 5vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5vh;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
#anli_8 {
|
||||
background-image: url(../../assets/img/left.png);
|
||||
height: 12vh;
|
||||
width: 3vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.anli_9 {
|
||||
width: 43.5vw;
|
||||
height: 63.5vh;
|
||||
background-image: url(../../assets/img/diannao.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
padding: 1.6vw 2.75vw;
|
||||
margin-top: 18vh;
|
||||
|
||||
::v-deep .el-carousel__container {
|
||||
// width: 42.7vw;
|
||||
height: 49.5vh;
|
||||
overflow: hidden;
|
||||
|
||||
// width: 34vw;
|
||||
// height: 45vh;
|
||||
// z-index: -999;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#anli_10 {
|
||||
background-image: url(../../assets/img/right.png);
|
||||
height: 12vh;
|
||||
width: 3vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.anli_11 {
|
||||
width: 40vw;
|
||||
height: 5vh;
|
||||
margin-left: 20vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 18vh;
|
||||
margin-bottom: 8vh;
|
||||
}
|
||||
|
||||
.anli_img {
|
||||
width: 9vw;
|
||||
height: 4vh;
|
||||
padding-left: 26vw;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<template>
|
||||
<div class="dongtai_1">
|
||||
<div class="dongtai_2">
|
||||
<topBar></topBar>
|
||||
</div>
|
||||
<div style="" class="dongtai_3">
|
||||
<div>
|
||||
<div style="" class="dongtai_4">新闻动态
|
||||
</div>
|
||||
<div style="" class="dongtai_5">NEWS</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div style="" class="dongtai_6">
|
||||
<div style="" v-for="item in textlist" :key="item.id" class="dongtai_7">
|
||||
<div class="dongtai_8">
|
||||
<div style="" class="dongtai_9">{{ item. day}}</div>
|
||||
<div style="" class="dongtai_10">{{item.year}}-{{item.month}}</div>
|
||||
</div>
|
||||
<div style="" class="dongtai_11">
|
||||
<span style="" class="dongtai_12" @click="handertext(item.id)">{{item.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div style="width: 80vw;display: flex;justify-content: center">
|
||||
<div style="" class="dongtai_13">
|
||||
<el-pagination background layout="total, prev, pager, next, jumper" :total="total" :page-size="pageSize"
|
||||
@current-change="handleCurrentChange" :current-page="currentPage" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
export default {
|
||||
components: {
|
||||
topBar
|
||||
},
|
||||
name: 'dongTai',
|
||||
data() {
|
||||
return {
|
||||
textlist: [],
|
||||
total: '',
|
||||
pageSize: 5, // 默认每页显示10条
|
||||
currentPage: 1, // 初始页码
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.gettext()
|
||||
},
|
||||
methods: {
|
||||
// 获取刘表
|
||||
gettext() {
|
||||
this.$http.get('/door/getArticleList', { params: { articleCat: 7, pageSize: 5, pageNum: 1 } }).then(res => {
|
||||
this.total = res.data.total
|
||||
this.textlist = res.data.rows.map(item => {
|
||||
// 截取年、月、日
|
||||
const createTime = item.createTime;
|
||||
const year = createTime.slice(0, 4);
|
||||
const month = createTime.slice(5, 7);
|
||||
const day = createTime.slice(8, 10);
|
||||
|
||||
// 将截取的年、月、日添加到item对象中
|
||||
return { ...item, year, month, day };
|
||||
});
|
||||
console.log(this.textlist,'lllpp');
|
||||
})
|
||||
},
|
||||
//分页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.$http.get('/door/getArticleList', { params: { articleCat: 7, pageSize: 5, pageNum: val } }).then(res => {
|
||||
this.total = res.data.total
|
||||
this.textlist = res.data.rows.map(item => {
|
||||
// 截取年、月、日
|
||||
const createTime = item.createTime;
|
||||
const year = createTime.slice(0, 4);
|
||||
const month = createTime.slice(5, 7);
|
||||
const day = createTime.slice(8, 10);
|
||||
|
||||
// 将截取的年、月、日添加到item对象中
|
||||
return { ...item, year, month, day };
|
||||
});
|
||||
})
|
||||
},
|
||||
// 点击跳转详情
|
||||
handertext(id){
|
||||
this.$router.push(`/dongtaiText/?id=${id}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dongtai_1 {
|
||||
padding-left: 10vw;
|
||||
|
||||
.dongtai_2 {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
.dongtai_3 {
|
||||
width: 75vw;
|
||||
margin-left: 2.5vw;
|
||||
background-color: #edf2f6;
|
||||
padding-top: 4vh;
|
||||
|
||||
}
|
||||
|
||||
.dongtai_4 {
|
||||
font-size: 2.1vw;
|
||||
color: #3f4040;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.dongtai_5 {
|
||||
text-align: center;
|
||||
font-size: 0.9vw;
|
||||
color: #606263;
|
||||
}
|
||||
|
||||
.dongtai_6 {
|
||||
width: 100%;
|
||||
background-color: #edf2f6;
|
||||
}
|
||||
|
||||
.dongtai_7 {
|
||||
margin-top: 6vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dongtai_8 {
|
||||
height: 13vh;
|
||||
margin-left: 10vw;
|
||||
width: 7vw;
|
||||
overflow: hidden;
|
||||
background: url(../../assets/img/rili.png) no-repeat;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dongtai_9 {
|
||||
|
||||
width: 7vw;
|
||||
height: 9vh;
|
||||
line-height: 9vh;
|
||||
text-align: center;
|
||||
font-size: 3vw;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.dongtai_10 {
|
||||
|
||||
width: 7vw;
|
||||
height: 4vh;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 4vh;
|
||||
font-size: 1vw;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
|
||||
.dongtai_11 {
|
||||
margin-left: 2vw;
|
||||
width: 45vw;
|
||||
height: 17vh;
|
||||
overflow: hidden;
|
||||
background: #FFFFFF;
|
||||
border-radius: 3px;
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
.dongtai_12 {
|
||||
font-size: 19px;
|
||||
color: #373636;
|
||||
&:hover{
|
||||
color: skyblue;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.dongtai_13 {
|
||||
height: 8vh;
|
||||
width: 50vw;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,363 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 大卡片 -->
|
||||
<div style="" class="fangan_1">
|
||||
<img :src="topimg" style="width: 100%;height: 100%;" alt="">
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
<div style="" class="fangan_15">
|
||||
|
||||
<div style="" class="fangan_2">
|
||||
<button class="left" @click="handernext" :disabled="lesttitle === ''">上一篇：{{ lesttitle ? lesttitle : '暂无'
|
||||
}}</button>
|
||||
<button class="left" @click="handerup" :disabled="nexttitle === ''">下一篇：{{ nexttitle ? nexttitle : '暂无'
|
||||
}}</button>
|
||||
</div>
|
||||
<!-- -->
|
||||
<!-- <div style="" class="fangan_9">{{ titlename }}</div> -->
|
||||
<!-- <div style="" class="fangan_10">
|
||||
充分体现了文化与科技融合、互联网+产业的应用与推广。</div> -->
|
||||
|
||||
<div class="card_1">
|
||||
|
||||
<div v-for="(item, index) in chanpinglist" :key="index">
|
||||
|
||||
<!-- //这里有一个判断，如果下表是单数就渲染左图右字，如果是双数就渲染右字左图 -->
|
||||
<!-- ！！！！！！！！！！！！！！ -->
|
||||
<div class="card_2 left_list wow animate__animated animate__bounceInLeft " v-if="index % 2 === 0">
|
||||
<div class="card_left">
|
||||
<el-image preview-teleported style="width: 100%; height: 100%" :src="item.contentImg" :zoom-rate="1.2" :max-scale="7"
|
||||
:min-scale="0.2" :preview-src-list="[item.contentImg]" :initial-index="999" fit="cover" hide-on-click-modal />
|
||||
</div>
|
||||
<div class="card_right">
|
||||
<p>{{item.title}}</p>
|
||||
<span v-html="item.content"></span>
|
||||
<!-- <span>{{ item.content }}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- ！！！！！！！！！！！！！！！！！！！ -->
|
||||
<div class="card_2 right_list wow animate__animated animate__bounceInRight" v-else>
|
||||
<div class="card_right">
|
||||
<p>{{item.title}}</p>
|
||||
<span v-html="item.content"></span>
|
||||
<!-- <span>{{ item.content }}</span> -->
|
||||
</div>
|
||||
<div class="card_left">
|
||||
<el-image preview-teleported style="width: 100%; height: 100%" :src="item.contentImg" :zoom-rate="1.2" :max-scale="7"
|
||||
:min-scale="0.2" :preview-src-list="[item.contentImg]" :initial-index="999" fit="cover" hide-on-click-modal />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'fangAn',
|
||||
data() {
|
||||
return {
|
||||
nextid: '',
|
||||
nexttitle: '',
|
||||
lestid: '',
|
||||
lesttitle: '',
|
||||
id: '',
|
||||
parentId: '',
|
||||
topimg: '',
|
||||
titlename: '',
|
||||
idnum: '',
|
||||
chanpinglist: [],
|
||||
banrlist: [
|
||||
{ img: 'http://www.jsxinyuansu.com/uploadfile/2017/0921/20170921053650831.png' },
|
||||
{ img: 'http://www.jsxinyuansu.com/uploadfile/2017/0921/20170921053820812.png' },
|
||||
{ img: 'http://www.jsxinyuansu.com/uploadfile/2017/0921/20170921054054277.png' },
|
||||
{ img: 'http://www.jsxinyuansu.com/uploadfile/2017/0921/20170921053850200.png' },
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.idnum = this.$route.query.id
|
||||
console.log(this.idnum);
|
||||
this.getcard()
|
||||
this.gettitle()
|
||||
},
|
||||
created() {
|
||||
// this.getcard()
|
||||
// this.gettitle()
|
||||
// this.getnexttitle()
|
||||
},
|
||||
methods: {
|
||||
|
||||
//获取列表信息
|
||||
getcard() {
|
||||
this.idnum = this.$route.query.id
|
||||
console.log(this.idnum, 'jjjkk');
|
||||
const cat = { articleCat: this.idnum }
|
||||
this.$http.get('/door/getArticleList', { params: cat }).then(res => {
|
||||
console.log(res, 'uuii');
|
||||
this.chanpinglist = res.data.rows.map(item => {
|
||||
// 在这里对每个item的coverImg字段前面拼接'http'
|
||||
const img = `${this.$baseUrl}${item.contentImg}`;
|
||||
return { ...item, contentImg: img };
|
||||
});
|
||||
|
||||
})
|
||||
},
|
||||
//获取顶部大图片和标题
|
||||
gettitle() {
|
||||
this.$http.get(`/door/getCategoryById/${this.idnum}`,).then(res => {
|
||||
this.id = res.data.data.id
|
||||
this.parentId = res.data.data.parentId
|
||||
console.log(this.id, this.parentId, 'hhhhhhaaa');
|
||||
this.titlename = res.data.data.description
|
||||
this.topimg = `${this.$baseUrl}${res.data.data.contentImg}`
|
||||
this.getnexttitle()
|
||||
this.getlesttitle()
|
||||
})
|
||||
},
|
||||
//获取下一篇的字
|
||||
getnexttitle() {
|
||||
console.log(this.id, this.parentId, 'hhhhh');
|
||||
this.$http.get(`/door/getNextCat`, { params: { id: this.id, parentId: this.parentId } },).then(res => {
|
||||
if (res.data.data) {
|
||||
this.nexttitle = res.data.data.title
|
||||
this.nextid = res.data.data.id
|
||||
} else {
|
||||
this.nexttitle = ''
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取上一篇的字
|
||||
getlesttitle() {
|
||||
console.log(this.id, this.parentId, 'hhhhh');
|
||||
this.$http.get(`/door/getUpCat`, { params: { id: this.id, parentId: this.parentId } },).then(res => {
|
||||
if (res.data.data) {
|
||||
this.lesttitle = res.data.data.title
|
||||
this.lestid = res.data.data.id
|
||||
} else {
|
||||
this.lesttitle = ''
|
||||
}
|
||||
})
|
||||
},
|
||||
//点击下一篇跳转
|
||||
handerup() {
|
||||
console.log(this.nextid, 'uuuu');
|
||||
localStorage.setItem('text', '解决方案')
|
||||
window.open(this.$router.resolve({ path: 'fangAn', query: { id: this.nextid } }).href, '_blank');
|
||||
},
|
||||
handernext() {
|
||||
localStorage.setItem('text', '解决方案')
|
||||
window.open(this.$router.resolve({ path: 'fangAn', query: { id: this.lestid } }).href, '_blank');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fangan_1 {
|
||||
width: 75vw;
|
||||
margin-left: 12.5vw;
|
||||
}
|
||||
|
||||
.fangan_2 {
|
||||
width: 95%;
|
||||
border: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.demo-image__error .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fangan_9 {
|
||||
width: 60vw;
|
||||
margin-left: 7.5vw;
|
||||
// height: 4vh;
|
||||
line-height: 5vh;
|
||||
margin-top: 2vh;
|
||||
font-size: 1vw;
|
||||
text-align: center;
|
||||
color: #7a7a7a;
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
.fangan_10 {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
color: #7a7a7a;
|
||||
margin-top: 1vh;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fangan_11 {
|
||||
padding-left: 2.5vw;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.fangan_12 {
|
||||
width: 14vw;
|
||||
height: 25vh;
|
||||
background-color: #205299;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.fangan_13 {
|
||||
margin-left: 9.8vw;
|
||||
width: 3vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 4vh;
|
||||
}
|
||||
|
||||
.fangan_14 {
|
||||
|
||||
width: 55vw;
|
||||
height: 32vh;
|
||||
margin-top: 5vh;
|
||||
margin-left: 4vw;
|
||||
}
|
||||
|
||||
.fangan_15 {
|
||||
|
||||
width: 75vw;
|
||||
padding-bottom: 5vh;
|
||||
background-color: #f8f8f8;
|
||||
margin-left: 12.5vw;
|
||||
padding-top: 4vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.left {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
background-color: #f8f8f8;
|
||||
margin-left: 5vw;
|
||||
font-size: 0.8vw;
|
||||
color: #4b4949;
|
||||
|
||||
}
|
||||
|
||||
.anli1 {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
width: 1vw;
|
||||
height: 3vh;
|
||||
background-size: cover;
|
||||
border: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/zuo.png);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.anli2 {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
width: 1vw;
|
||||
height: 3vh;
|
||||
background-size: cover;
|
||||
border: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/you.png);
|
||||
}
|
||||
|
||||
.left_title {
|
||||
margin: 2vw 0 0 6vw;
|
||||
width: 7vw;
|
||||
height: 6vh;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card_1 {
|
||||
margin-top: 5vh;
|
||||
margin-left: 8.5vw;
|
||||
}
|
||||
|
||||
.card_2 {
|
||||
width: 58vw;
|
||||
// height: 34vh;
|
||||
display: flex;
|
||||
margin-bottom: 8vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.card_left {
|
||||
width: 18vw;
|
||||
|
||||
height: 38vh;
|
||||
// position: relative;
|
||||
text-align: center;
|
||||
/* 用于旧浏览器或行内元素的居中 */
|
||||
display: flex;
|
||||
/* 使用Flexbox */
|
||||
justify-content: center;
|
||||
/* 水平居中 */
|
||||
align-items: center;
|
||||
/* 垂直居中，如果需要的话 */
|
||||
|
||||
/* 如果你想限制容器高度 */
|
||||
overflow: hidden;
|
||||
/* 如果图像高度超过容器，防止溢出 */
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// .zoomed {
|
||||
// transform: scale(2);
|
||||
// /* 放大2倍 */
|
||||
// transition: transform 0.2s;
|
||||
// /* 平滑过渡效果 */
|
||||
// }
|
||||
}
|
||||
|
||||
.card_title {
|
||||
// position: absolute;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.card_right {
|
||||
width: 40vw;
|
||||
|
||||
padding: 2vh;
|
||||
p{
|
||||
color: #4b4949;
|
||||
font-weight: 600;
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.95vw;
|
||||
display: block;
|
||||
line-height: 1.6vw;
|
||||
margin-top: 0.7vh;
|
||||
|
||||
color: #7a7a7a;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="father">
|
||||
<!-- 轮播 -->
|
||||
<topBar></topBar>
|
||||
<!-- -->
|
||||
<div class="jieshao_1">
|
||||
|
||||
|
||||
<div style="" class="jieshao_2">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
|
||||
:type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow"
|
||||
@click="hanerto(activity.content)" style="cursor: pointer; ">
|
||||
<span style="font-size: 0.8vw;">{{ activity.content }}</span>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="jieshao_3">
|
||||
<div class="right_logo">
|
||||
<img src="@/assets/img/jishu.png" alt="">
|
||||
</div>
|
||||
|
||||
<div style="" class="jieshao_4">
|
||||
<div style="" class="jieshao_5">
|
||||
<!-- <div v-html="text"></div> -->
|
||||
<span class="font">技术架构</span> <br>
|
||||
|
||||
江苏新元素数字科技有限公司的研发平台建立在创新的技术架构之上，旨在推动技术边界，实现产品与服务的卓越性能和可靠性。
|
||||
|
||||
技术哲学前沿融合：我们采用前沿技术，融合最新的编程范式和设计思想，确保技术解决方案的先进性和前瞻性。<br>
|
||||
|
||||
智能自动化：通过自动化工具和流程，我们实现研发效率的最大化，同时保持代码质量和系统稳定性。<br>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="jieshao_6" style="">
|
||||
<img :src="textimg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="jieshao_7" style="">
|
||||
<span class="font">创新引擎</span> <br> 动态研发环境：我们的环境支持快速迭代和持续创新，以适应不断变化的市场需求和技术进步。
|
||||
|
||||
模块化设计：采用模块化设计理念，我们的技术栈能够灵活组合，以支持多样化的项目需求。<br>
|
||||
|
||||
<span class="font">技术生态</span> <br>
|
||||
|
||||
开放兼容：我们的研发平台支持开放标准和协议，确保与各种技术生态系统的无缝集成。
|
||||
|
||||
安全基石：安全是我们研发的首要原则，我们的技术栈包括了多层安全措施，保护数据和系统不受威胁。<br>
|
||||
|
||||
<span class="font">研发动力</span> <br>
|
||||
|
||||
高效协作：我们的研发平台促进团队成员之间的高效协作，通过共享知识、工具和最佳实践，加速创新过程。
|
||||
|
||||
持续学习：我们鼓励团队成员持续学习最新的技术趋势，以保持我们解决方案的相关性和竞争力。
|
||||
|
||||
未来导向
|
||||
|
||||
技术预见：我们不断探索和研究新兴技术，如等，以预见并塑造技术的未来。
|
||||
|
||||
创新孵化：我们的研发平台是一个创新孵化器，能够将创意转化为实际的产品和解决方案。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
export default {
|
||||
name: 'gsjiShu',
|
||||
components: {
|
||||
topBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textimg:"",
|
||||
text:"",
|
||||
name: "",//公司名称
|
||||
activities: [
|
||||
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
type: 'primary',
|
||||
hollow: true,
|
||||
content: '',
|
||||
color: '##fff',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getlist()
|
||||
this.gettext()
|
||||
},
|
||||
methods: {
|
||||
hanerto(e) {
|
||||
console.log(e, 'oo');
|
||||
|
||||
if (e == '公司介绍') {
|
||||
this.$router.push({ name: 'jieShao' })
|
||||
}
|
||||
if (e == '公司业务') {
|
||||
this.$router.push({ name: 'gsyeWu' })
|
||||
}
|
||||
if (e == '公司团队') {
|
||||
this.$router.push({ name: 'gstuanDui' })
|
||||
}
|
||||
if (e == '公司资质') {
|
||||
this.$router.push({ name: 'gsziZhi' })
|
||||
}
|
||||
if (e == '企业文化') {
|
||||
this.$router.push({ name: 'gswenHua' })
|
||||
}
|
||||
if (e == '技术方向') {
|
||||
this.$router.push({ name: 'gsjiShu' })
|
||||
}
|
||||
},
|
||||
//获取左边的时间线
|
||||
getlist() {
|
||||
this.$http.get('/door/getCategory/1').then(res => {
|
||||
this.id= res.data.data[4].id
|
||||
console.log(this.id, 'hhuu');
|
||||
this.activities.forEach((activity, index) => {
|
||||
// 查找res.data.data中对应索引的元素
|
||||
const title = res.data.data[index].title;
|
||||
// 替换content字段
|
||||
activity.content = title;
|
||||
});
|
||||
this.gettext()
|
||||
})
|
||||
},
|
||||
//右边的文章
|
||||
gettext(){
|
||||
this.$http.get('/door/getArticleList', { params: { articleCat:this.id} }).then(res => {
|
||||
// console.log(res.data.rows[0].content,'ggyy');
|
||||
this.text=res.data.rows[0].content
|
||||
this.textimg=`${this.$baseUrl}${res.data.rows[0].contentImg}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.font{
|
||||
font-size: 1vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
.father {
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
|
||||
}
|
||||
|
||||
.jieshao_1 {
|
||||
|
||||
width: 75vw;
|
||||
height: 135vh;
|
||||
margin-left: 2.5vw;
|
||||
background-color: #edf2f6;
|
||||
padding-top: 3vh;
|
||||
display: flex;
|
||||
margin-top: 0vh;
|
||||
}
|
||||
|
||||
.jieshao_2 {
|
||||
width: 6vw;
|
||||
margin-left: 6vw;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.jieshao_3 {
|
||||
width: 68%;
|
||||
height: 125vh;
|
||||
background-color: #fff;
|
||||
margin-left: 0vw !important;
|
||||
padding: 2vw;
|
||||
|
||||
}
|
||||
|
||||
.jieshao_4 {
|
||||
width: 100%;
|
||||
margin-top: 3vh;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.jieshao_5 {
|
||||
width: 55%;
|
||||
font-size: 16px;
|
||||
color: #2d2d2d;
|
||||
// text-indent: 1.3vw;
|
||||
line-height: 4vh;
|
||||
float: left;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.jieshao_6 {
|
||||
width: 40%;
|
||||
height: 28vh;
|
||||
margin-left: 1vw;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.jieshao_7 {
|
||||
margin-top: 2vh;
|
||||
width: 90%;
|
||||
font-size: 16px;
|
||||
color: #2d2d2d;
|
||||
|
||||
line-height: 4vh;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right_logo {
|
||||
width: 9vw;
|
||||
height: 7vh;
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="father">
|
||||
<!-- 轮播 -->
|
||||
<topBar></topBar>
|
||||
<!-- -->
|
||||
<div class="jieshao_1">
|
||||
|
||||
|
||||
<div style="" class="jieshao_2">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
|
||||
:type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow"
|
||||
@click="hanerto(activity.content)" style="cursor: pointer; ">
|
||||
<span style="font-size: 0.8vw;">{{ activity.content }}</span>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="jieshao_3">
|
||||
<div class="right_logo">
|
||||
<img src="../../assets/img/gsjs.png ">
|
||||
</div>
|
||||
|
||||
<div style="" class="jieshao_4">
|
||||
<div style="" class="jieshao_5">
|
||||
|
||||
江苏新元素数字科技有限公司（简称：新元素），成立于2011年3月，是一家融合现代信息科技和创意设计的文化科技型企业。公司拥有专业技术深厚的研发、实施和运营团队，以市场需求为引导，为客户提供高效、有价值的产品、技术服务和解决方案是我们的目标。
|
||||
|
||||
2023年是公司再创业之年，以团队建设、技术转型、业务整合为契合点，重塑企业发展之旅。 公司依托AI、（大）数据（信息）分析等新型信息技术和文化创意设计，专注于智慧文旅和教育、行业智能监管服务平台、服务于企业运营的全流程优化需求的数字化建设等业务。
|
||||
</div>
|
||||
<div class="jieshao_6" style="">
|
||||
<img :src="textimg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="jieshao_7" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
export default {
|
||||
name: 'jieShao',
|
||||
components: {
|
||||
topBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textimg:"",
|
||||
text:"",
|
||||
name: "",//公司名称
|
||||
activities: [
|
||||
|
||||
{
|
||||
content: '',
|
||||
color: '#fff',
|
||||
type: 'primary',
|
||||
hollow: true,
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getlist()
|
||||
this.gettext()
|
||||
},
|
||||
methods: {
|
||||
hanerto(e) {
|
||||
console.log(e, 'oo');
|
||||
|
||||
// if(e=='公司介绍'){
|
||||
// this.$router.push({ name: 'gsjieShao' })
|
||||
// }
|
||||
if (e == '公司业务') {
|
||||
this.$router.push({ name: 'gsyeWu' })
|
||||
}
|
||||
if (e == '公司团队') {
|
||||
this.$router.push({ name: 'gstuanDui' })
|
||||
}
|
||||
if (e == '公司资质') {
|
||||
this.$router.push({ name: 'gsziZhi' })
|
||||
}
|
||||
if (e == '企业文化') {
|
||||
this.$router.push({ name: 'gswenHua' })
|
||||
}
|
||||
if (e == '技术方向') {
|
||||
this.$router.push({ name: 'gsjiShu' })
|
||||
}
|
||||
},
|
||||
//获取左边的时间线
|
||||
getlist() {
|
||||
this.$http.get('/door/getCategory/1').then(res => {
|
||||
this.id= res.data.data[0].id
|
||||
console.log(this.id, 'hhuu');
|
||||
this.activities.forEach((activity, index) => {
|
||||
// 查找res.data.data中对应索引的元素
|
||||
const title = res.data.data[index].title;
|
||||
// 替换content字段
|
||||
activity.content = title;
|
||||
});
|
||||
this.gettext()
|
||||
})
|
||||
},
|
||||
//右边的文章
|
||||
gettext(){
|
||||
this.$http.get('/door/getArticleList', { params: { articleCat:this.id} }).then(res => {
|
||||
// console.log(res.data.rows[0].content,'ggyy');
|
||||
this.text=res.data.rows[0].content
|
||||
this.textimg=`${this.$baseUrl}${res.data.rows[0].contentImg}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.father {
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
|
||||
}
|
||||
|
||||
.jieshao_1 {
|
||||
|
||||
width: 75vw;
|
||||
height: 90vh;
|
||||
margin-left: 2.5vw;
|
||||
background-color: #edf2f6;
|
||||
padding-top: 3vh;
|
||||
display: flex;
|
||||
margin-top: 0vh;
|
||||
}
|
||||
|
||||
.jieshao_2 {
|
||||
width: 6vw;
|
||||
margin-left: 6vw;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.jieshao_3 {
|
||||
width: 68%;
|
||||
height: 80vh;
|
||||
background-color: #fff;
|
||||
margin-left: 0vw !important;
|
||||
padding: 2vw;
|
||||
|
||||
}
|
||||
|
||||
.jieshao_4 {
|
||||
width: 100%;
|
||||
margin-top: 3vh;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.jieshao_5 {
|
||||
width: 55%;
|
||||
font-size: 16px;
|
||||
color: #2d2d2d;
|
||||
text-indent: 1.3vw;
|
||||
line-height: 4vh;
|
||||
float: left;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.jieshao_6 {
|
||||
width: 40%;
|
||||
height: 28vh;
|
||||
margin-left: 1vw;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.jieshao_7 {
|
||||
margin-top: 2vh;
|
||||
width: 90%;
|
||||
font-size: 16px;
|
||||
color: #2d2d2d;
|
||||
text-indent: 1.3vw;
|
||||
line-height: 4vh;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right_logo {
|
||||
width: 8.3vw;
|
||||
height: 7vh;
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="father">
|
||||
<!-- 轮播 -->
|
||||
<topBar></topBar>
|
||||
<!-- -->
|
||||
<div class="jieshao_1">
|
||||
|
||||
<div style="" class="jieshao_2">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
|
||||
:type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow"
|
||||
@click="hanerto(activity.content)" style="cursor: pointer;">
|
||||
<span style="font-size: 0.8vw;">{{ activity.content }}</span>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="jieshao_3" style="">
|
||||
<div style="width: 8.3vw;height: 7vh;">
|
||||
<img src="../../assets/img/tunadui.png" alt=""
|
||||
style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
|
||||
<div style="" class="jieshao_4">
|
||||
<div style="" class="jieshao_5">
|
||||
<!-- <div v-html="text"></div> -->
|
||||
新元素团队由三个方面构成：
|
||||
|
||||
基础团队
|
||||
|
||||
包括高级工程、资深设计师为代表的年轻研发团队和经验丰富的运营团队，是公司发展的基础和源动力。
|
||||
|
||||
高级顾问和合作团队
|
||||
|
||||
团队包括技术领域专家和教授、校企合作的研发团队。
|
||||
</div>
|
||||
<div class="jieshao_6" style="">
|
||||
<img :src="textimg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="jieshao_7" style="">
|
||||
公司专注于智慧旅游、大数据云端、政府教育等行业的研发、实施、运行维护以及文化创意设计等业务。公司先后被认定为江苏省首批重点文化科技企业、双软企业、国家中小型科技企业等。通过近几年研发与创意的积累，公司在旅游、教育及政府、物流领域中形成了以“互联网+”为基础和导向的产品系列。
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
export default {
|
||||
name: 'gstuanDui',
|
||||
components: {
|
||||
topBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textimg:"",
|
||||
text:"",
|
||||
name: "",//公司名称
|
||||
activities: [
|
||||
|
||||
{
|
||||
content: '公司介绍',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '公司业务',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '公司团队',
|
||||
|
||||
color: '#fff',
|
||||
type: 'primary',
|
||||
hollow: true,
|
||||
},
|
||||
{
|
||||
content: '公司资质',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '公司文化',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getlist()
|
||||
},
|
||||
methods: {
|
||||
hanerto(e) {
|
||||
console.log(e, 'oo');
|
||||
|
||||
if (e == '公司介绍') {
|
||||
this.$router.push({ name: 'jieShao' })
|
||||
}
|
||||
if (e == '公司业务') {
|
||||
this.$router.push({ name: 'gsyeWu' })
|
||||
}
|
||||
// if(e=='公司团队'){
|
||||
// this.$router.push({ name: 'gstuanDui' })
|
||||
// }
|
||||
if (e == '公司资质') {
|
||||
this.$router.push({ name: 'gsziZhi' })
|
||||
}
|
||||
if (e == '企业文化') {
|
||||
this.$router.push({ name: 'gswenHua' })
|
||||
}
|
||||
if (e == '技术方向') {
|
||||
this.$router.push({ name: 'gsjiShu' })
|
||||
}
|
||||
},
|
||||
getlist() {
|
||||
this.$http.get('/door/getCategory/1').then(res => {
|
||||
this.id= res.data.data[2].id
|
||||
console.log(res, 'hhuu');
|
||||
this.activities.forEach((activity, index) => {
|
||||
// 查找res.data.data中对应索引的元素
|
||||
const title = res.data.data[index].title;
|
||||
// 替换content字段
|
||||
activity.content = title;
|
||||
});
|
||||
this.gettext()
|
||||
})
|
||||
},
|
||||
//右边的文章
|
||||
gettext(){
|
||||
this.$http.get('/door/getArticleList', { params: { articleCat:this.id} }).then(res => {
|
||||
// console.log(res.data.rows[0].content,'ggyy');
|
||||
this.text=res.data.rows[0].content
|
||||
this.textimg=`${this.$baseUrl}${res.data.rows[0].contentImg}`
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.father {
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.jieshao_1 {
|
||||
width: 75vw;
|
||||
height: 90vh;
|
||||
margin-left: 2.5vw;
|
||||
background-color: #edf2f6;
|
||||
padding-top: 3vh;
|
||||
display: flex;
|
||||
margin-top: 0vh;
|
||||
}
|
||||
|
||||
.jieshao_2 {
|
||||
width: 6vw;
|
||||
margin-left: 6vw;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.jieshao_3 {
|
||||
width: 68%;
|
||||
height: 80vh;
|
||||
background-color: #fff;
|
||||
margin-left: 0vw !important;
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
.jieshao_4 {
|
||||
width: 100%;
|
||||
margin-top: 3vh;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.jieshao_5 {
|
||||
width: 55%;
|
||||
font-size: 16px;
|
||||
color: #2d2d2d;
|
||||
text-indent: 1.3vw;
|
||||
line-height: 4vh;
|
||||
float: left;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.jieshao_6 {
|
||||
width: 50%;
|
||||
height: 280px;
|
||||
margin-left: 2vw;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.jieshao_7 {
|
||||
margin-top: 2vh;
|
||||
width: 90%;
|
||||
font-size: 16px;
|
||||
color: #2d2d2d;
|
||||
text-indent: 1.3vw;
|
||||
line-height: 4vh;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="father">
|
||||
<!-- 轮播 -->
|
||||
<topBar></topBar>
|
||||
<!-- -->
|
||||
<div class="jieshao_1">
|
||||
|
||||
<div style="" class="jieshao_2">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
|
||||
:type="activity.type" :color="activity.color" :size="activity.size"
|
||||
:hollow="activity.hollow" @click="hanerto(activity.content)" style="cursor: pointer;">
|
||||
<span style="font-size: 0.8vw;">{{ activity.content }}</span>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="jieshao_3" style="">
|
||||
<div style="width: 8.3vw;height: 7vh">
|
||||
<img src="../../assets/img/wenhua.png" alt="">
|
||||
</div>
|
||||
|
||||
|
||||
<div style="" class="jieshao_4">
|
||||
<div style="" class="jieshao_5">
|
||||
<div v-html="text"></div>
|
||||
<!-- 江苏新元素数字科技有限公司（简称：新元素），成立于2011年3月，是一家融合互联网信息科技和创意设计为一体的文化科技型企业。公司拥有以技术专家为学科带头人和具有丰富实践经验的技术团队和设计团队，不断满足客户需求，提供特色的行业信息化及设计策划综合服务。 -->
|
||||
</div>
|
||||
<div class="jieshao_6" style="">
|
||||
<img :src="textimg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="jieshao_7" style="">
|
||||
公司专注于智慧旅游、大数据云端、政府教育等行业的研发、实施、运行维护以及文化创意设计等业务。公司先后被认定为江苏省首批重点文化科技企业、双软企业、国家中小型科技企业等。通过近几年研发与创意的积累，公司在旅游、教育及政府、物流领域中形成了以“互联网+”为基础和导向的产品系列。
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
export default {
|
||||
name: 'gswenHua',
|
||||
components: {
|
||||
topBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textimg: "",
|
||||
text: "",
|
||||
activities: [
|
||||
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '##fff',
|
||||
type: 'primary',
|
||||
hollow: true,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getlist()
|
||||
},
|
||||
methods: {
|
||||
hanerto(e) {
|
||||
console.log(e, 'oo');
|
||||
|
||||
if (e == '公司介绍') {
|
||||
this.$router.push({ name: 'jieShao' })
|
||||
}
|
||||
if (e == '公司业务') {
|
||||
this.$router.push({ name: 'gsyeWu' })
|
||||
}
|
||||
if (e == '公司团队') {
|
||||
this.$router.push({ name: 'gstuanDui' })
|
||||
}
|
||||
if (e == '公司资质') {
|
||||
this.$router.push({ name: 'gsziZhi' })
|
||||
}
|
||||
// if(e=='公司文化'){
|
||||
// this.$router.push({ name: 'gswenHua' })
|
||||
// }
|
||||
if (e == '技术方向') {
|
||||
this.$router.push({ name: 'gsjiShu' })
|
||||
}
|
||||
},
|
||||
getlist() {
|
||||
this.$http.get('/door/getCategory/1').then(res => {
|
||||
this.id = res.data.data[5].id
|
||||
this.activities.forEach((activity, index) => {
|
||||
// 查找res.data.data中对应索引的元素
|
||||
const title = res.data.data[index].title;
|
||||
// 替换content字段
|
||||
activity.content = title;
|
||||
});
|
||||
this.gettext()
|
||||
})
|
||||
},
|
||||
//右边的文章
|
||||
gettext() {
|
||||
this.$http.get('/door/getArticleList', { params: { articleCat: this.id } }).then(res => {
|
||||
// console.log(res.data.rows[0].content,'ggyy');
|
||||
this.text = res.data.rows[0].content
|
||||
this.textimg = `${this.$baseUrl}${res.data.rows[0].contentImg}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.father {
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.jieshao_1 {
|
||||
width: 75vw;
|
||||
height: 145vh;
|
||||
margin-left: 2.5vw;
|
||||
background-color: #edf2f6;
|
||||
padding-top: 3vh;
|
||||
display: flex;
|
||||
margin-top: 0vh;
|
||||
}
|
||||
|
||||
.jieshao_2 {
|
||||
width: 6vw;
|
||||
margin-left: 6vw;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.jieshao_3 {
|
||||
width: 68%;
|
||||
height: 130vh;
|
||||
background-color: #fff;
|
||||
margin-left: 0vw !important;
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
.jieshao_4 {
|
||||
width: 100%;
|
||||
margin-top: 3vh;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.jieshao_5 {
|
||||
width: 55%;
|
||||
font-size: 16px;
|
||||
color: #2d2d2d;
|
||||
text-indent: 1.3vw;
|
||||
line-height: 4vh;
|
||||
float: left;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.jieshao_6 {
|
||||
width: 50%;
|
||||
height: 280px;
|
||||
margin-left: 2vw;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.jieshao_7 {
|
||||
margin-top: 2vh;
|
||||
width: 90%;
|
||||
font-size: 16px;
|
||||
color: #2d2d2d;
|
||||
text-indent: 1.3vw;
|
||||
line-height: 4vh;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="father">
|
||||
<!-- 轮播 -->
|
||||
<topBar></topBar>
|
||||
<!-- -->
|
||||
<div class="jieshao_1">
|
||||
|
||||
<div style="" class="jieshao_2">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
|
||||
:type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow" @click="hanerto(activity.content)" style="cursor: pointer;">
|
||||
<span style="font-size: 0.8vw;">{{ activity.content }}</span>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="jieshao_3" style="">
|
||||
<div style="width: 8.3vw;height: 7vh;">
|
||||
<img src="../../assets/img/yewu.png" alt="" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
|
||||
<div style="" class="jieshao_4">
|
||||
<div style="" class="jieshao_5">
|
||||
|
||||
江苏新元素主要技术方向是（大）数据分析、信息研判，AI技术应用研发等，是融合文化创意设计的现代新型互联网信息技术公司。公司专注于制造业信息化、智慧文旅、智慧教育、行业监管服务平台等产品研发和项目部署，以及行业解决方案和信息化建设咨询。
|
||||
</div>
|
||||
<div class="jieshao_6" style="">
|
||||
<img :src="textimg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="jieshao_7" style="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
export default {
|
||||
name: 'gsyeWu',
|
||||
components: {
|
||||
topBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textimg:"",
|
||||
text:"",
|
||||
name: "",//公司名称
|
||||
activities: [
|
||||
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#fff',
|
||||
type: 'primary',
|
||||
hollow: true,
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getlist()
|
||||
},
|
||||
methods: {
|
||||
hanerto(e){
|
||||
console.log(e,'oo');
|
||||
|
||||
if(e=='公司介绍'){
|
||||
this.$router.push({ name: 'jieShao' })
|
||||
}
|
||||
// if(e=='公司业务'){
|
||||
// this.$router.push({ name: 'gsyeWu' })
|
||||
// }
|
||||
if(e=='公司团队'){
|
||||
this.$router.push({ name: 'gstuanDui' })
|
||||
}
|
||||
if(e=='公司资质'){
|
||||
this.$router.push({ name: 'gsziZhi' })
|
||||
}
|
||||
if(e=='企业文化'){
|
||||
this.$router.push({ name: 'gswenHua' })
|
||||
}
|
||||
if (e == '技术方向') {
|
||||
this.$router.push({ name: 'gsjiShu' })
|
||||
}
|
||||
},
|
||||
getlist() {
|
||||
this.$http.get('/door/getCategory/1').then(res => {
|
||||
console.log(res, 'hhuu');
|
||||
this.id= res.data.data[1].id
|
||||
this.activities.forEach((activity, index) => {
|
||||
// 查找res.data.data中对应索引的元素
|
||||
const title = res.data.data[index].title;
|
||||
// 替换content字段
|
||||
activity.content = title;
|
||||
});
|
||||
this.gettext()
|
||||
})
|
||||
},
|
||||
gettext(){
|
||||
this.$http.get('/door/getArticleList', { params: { articleCat:this.id} }).then(res => {
|
||||
// console.log(res.data.rows[0].content,'ggyy');
|
||||
this.text=res.data.rows[0].content
|
||||
this.textimg=`${this.$baseUrl}${res.data.rows[0].contentImg}`
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.father {
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.jieshao_1 {
|
||||
width: 75vw;
|
||||
height: 90vh;
|
||||
margin-left: 2.5vw;
|
||||
background-color: #edf2f6;
|
||||
padding-top: 3vh;
|
||||
display: flex;
|
||||
margin-top: 0vh;
|
||||
}
|
||||
|
||||
.jieshao_2 {
|
||||
width: 6vw;
|
||||
margin-left: 6vw;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.jieshao_3 {
|
||||
width: 68%;
|
||||
height: 80vh;
|
||||
background-color: #fff;
|
||||
margin-left: 0vw !important;
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
.jieshao_4 {
|
||||
width: 100%;
|
||||
margin-top: 3vh;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.jieshao_5 {
|
||||
width: 55%;
|
||||
font-size: 16px;
|
||||
color: #2d2d2d;
|
||||
text-indent: 1.3vw;
|
||||
line-height: 4vh;
|
||||
float: left;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.jieshao_6 {
|
||||
width: 50%;
|
||||
height: 280px;
|
||||
margin-left: 2vw;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.jieshao_7 {
|
||||
margin-top: 2vh;
|
||||
width: 90%;
|
||||
font-size: 16px;
|
||||
color: #2d2d2d;
|
||||
text-indent: 1.3vw;
|
||||
line-height: 4vh;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 轮播 -->
|
||||
<div class="top">
|
||||
<topBar></topBar>
|
||||
</div>
|
||||
|
||||
<!-- 中间主图 -->
|
||||
<div class="center">
|
||||
<!-- 主题的，每一行item -->
|
||||
<div class="center-item">
|
||||
<div class="center-left">
|
||||
<div style="height: 28vh;">
|
||||
<div class="item-title">总经理助理（营销方向） </div>
|
||||
<div v-for="(item, index) in iteminfo" :key="index">
|
||||
<div class="item-info">{{ item.info }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item-bottom"></div>
|
||||
<div class="item-email">HR邮箱：hr@xinyuansu.com</div>
|
||||
</div>
|
||||
|
||||
<div class="center-right">
|
||||
<div style="height: 28vh">
|
||||
<div class="item-title">销售工程师</div>
|
||||
<div v-for="(item, index) in iteminfo2" :key="index">
|
||||
<div class="item-info">{{ item.info }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-bottom"></div>
|
||||
<div class="item-email">HR邮箱：hr@xinyuansu.com</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 占位 -->
|
||||
<div class="zhanwei"></div>
|
||||
<!-- -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'zhaoPing',
|
||||
components: {
|
||||
topBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
iteminfo: [
|
||||
{ info: '1.全日制本科及以上学历，市场营销或计算机相关专业优先。' },
|
||||
{ info: '2.五年及以上工作经验，不少于一年以上营销工作经验。' },
|
||||
{ info: '3.优秀的人际关系处理能力，优秀的团队合作精神。' },
|
||||
{ info: '4.学习能力强，执行能力强，擅于组织协调。' },
|
||||
{ info: '5.具备独立开发市场能力，具备独立商务处理能力。' },
|
||||
{ info: '6.诚实守信，形象气质佳。' },
|
||||
{ info: '7.熟练驾驶技术。' },
|
||||
],
|
||||
iteminfo2: [
|
||||
{ info: '1.全日制本科及以上学历' },
|
||||
{ info: ' 2.市场营销或计算机相关专业优先两年以上市场销售相关工作经验对信息化行业及市场有充分了解' },
|
||||
{ info: '3.优秀的人际交往能力 具备优秀的人际关系处理能力，良好的团队合作精神。' },
|
||||
{ info: '4.工作积极主动，学习能力强，抗压能力强。' },
|
||||
{ info: '5.具备优秀的文案处理能力，熟练使用主流办公软件。' },
|
||||
{ info: '6.有信息化软件销售经验，有系统方案处理能力者优先录用。' },
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top {
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 75vw;
|
||||
padding-top: 5vh;
|
||||
|
||||
|
||||
background-color: #edf2f6;
|
||||
margin-left: 12.5vw;
|
||||
|
||||
}
|
||||
|
||||
.center-item {
|
||||
width: 70vw;
|
||||
margin-left: 8vw;
|
||||
margin-bottom: 2vh;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.center-left {
|
||||
width: 29vw;
|
||||
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.center-right {
|
||||
width: 29vw;
|
||||
|
||||
background-color: #fff;
|
||||
margin-left: 1vw;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
height: 3vh;
|
||||
font-size: 18px;
|
||||
margin-top: 3vh;
|
||||
padding-left: 1.5vw;
|
||||
color: #1F5299;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 23px;
|
||||
margin-top: 10px;
|
||||
padding-left: 1.5vw;
|
||||
padding-right: 2vw;
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
width: 26vw;
|
||||
height: 3vh;
|
||||
margin-left: 2vw;
|
||||
|
||||
border-bottom: 1px dashed #CCCCCC;
|
||||
}
|
||||
|
||||
.item-email {
|
||||
color: #555555;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 2vw;
|
||||
width: 20vw;
|
||||
height: 5vh;
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
.zhanwei {
|
||||
width: 100%;
|
||||
height: 5vh;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="father">
|
||||
<!-- 轮播 -->
|
||||
<topBar></topBar>
|
||||
<!-- -->
|
||||
<div class="jieshao_1">
|
||||
|
||||
<div style="" class="jieshao_2">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
|
||||
:type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow" @click="hanerto(activity.content)" style="cursor: pointer;">
|
||||
<span style="font-size: 0.8vw;">{{ activity.content }}</span>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="jieshao_3" style="">
|
||||
<div style="width: 8.3vw;height: 7vh;">
|
||||
<img src="../../assets/img/zizhi.png" alt="" style="width: 100%;height: 100%">
|
||||
</div>
|
||||
|
||||
<div class="img_box">
|
||||
|
||||
<div class="zizhi_img" v-for="(item,index) in imglist" :key="index">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
export default {
|
||||
name: 'gsziZhi',
|
||||
components: {
|
||||
topBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imglist:[
|
||||
{img:"http://admin.jsxinyuansu.com/profile/upload/2024/08/01/20170808083219468_20240801173231A027.jpg"},
|
||||
{img:"http://admin.jsxinyuansu.com/profile/upload/2024/08/01/20170808083219613_20240801173241A029.jpg"},
|
||||
{img:"http://admin.jsxinyuansu.com/profile/upload/2024/08/01/20170808083219861_20240801173246A030.jpg"},
|
||||
{img:"http://admin.jsxinyuansu.com/profile/upload/2024/08/01/20170808083219181_20240801173225A026.jpg"},
|
||||
{img:"http://admin.jsxinyuansu.com/profile/upload/2024/08/01/20170808083219472_20240801173236A028.jpg"},
|
||||
],
|
||||
text:'',
|
||||
activities: [
|
||||
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#fff',
|
||||
type: 'primary',
|
||||
hollow: true,
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
{
|
||||
content: '',
|
||||
color: '#1c60c3',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getlist()
|
||||
},
|
||||
methods: {
|
||||
hanerto(e){
|
||||
console.log(e,'oo');
|
||||
|
||||
if(e=='公司介绍'){
|
||||
this.$router.push({ name: 'jieShao' })
|
||||
}
|
||||
if(e=='公司业务'){
|
||||
this.$router.push({ name: 'gsyeWu' })
|
||||
}
|
||||
if(e=='公司团队'){
|
||||
this.$router.push({ name: 'gstuanDui' })
|
||||
}
|
||||
// if(e=='公司资质'){
|
||||
// this.$router.push({ name: 'gsziZhi' })
|
||||
// }
|
||||
if(e=='企业文化'){
|
||||
this.$router.push({ name: 'gswenHua' })
|
||||
}
|
||||
if (e == '技术方向') {
|
||||
this.$router.push({ name: 'gsjiShu' })
|
||||
}
|
||||
},
|
||||
getlist() {
|
||||
this.$http.get('/door/getCategory/1').then(res => {
|
||||
this.id= res.data.data[3].id
|
||||
this.activities.forEach((activity, index) => {
|
||||
// 查找res.data.data中对应索引的元素
|
||||
const title = res.data.data[index].title;
|
||||
// 替换content字段
|
||||
activity.content = title;
|
||||
});
|
||||
this.gettext()
|
||||
})
|
||||
},
|
||||
//右边的文章
|
||||
gettext(){
|
||||
this.$http.get('/door/getArticleList', { params: { articleCat:this.id} }).then(res => {
|
||||
// console.log(res.data.rows[0].content,'ggyy');
|
||||
this.text=res.data.rows[0].content
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.father {
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.jieshao_1 {
|
||||
width: 75vw;
|
||||
|
||||
margin-left: 2.5vw;
|
||||
background-color: #edf2f6;
|
||||
padding-top: 3vh;
|
||||
display: flex;
|
||||
margin-top: 0vh;
|
||||
}
|
||||
|
||||
.jieshao_2 {
|
||||
width: 6vw;
|
||||
margin-left: 6vw;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.jieshao_3 {
|
||||
width: 68%;
|
||||
|
||||
background-color: #fff;
|
||||
margin-left: 0vw !important;
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
.jieshao_4 {
|
||||
width: 100%;
|
||||
margin-top: 3vh;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.jieshao_5 {
|
||||
width: 55%;
|
||||
font-size: 20px;
|
||||
color: #2d2d2d;
|
||||
text-indent: 26px;
|
||||
line-height: 42px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.jieshao_6 {
|
||||
width: 50%;
|
||||
height: 280px;
|
||||
margin-left: 2vw;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.jieshao_7 {
|
||||
margin-top: 2vh;
|
||||
width: 90%;
|
||||
font-size: 20px;
|
||||
color: #2d2d2d;
|
||||
text-indent: 26px;
|
||||
line-height: 42px;
|
||||
float: left;
|
||||
}
|
||||
.zizhi_img{
|
||||
width:25vw;
|
||||
height: 35vh;
|
||||
margin-bottom: 3vh;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.img_box{
|
||||
|
||||
margin-left: 10vw;
|
||||
margin-top: 4vh;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<template>
|
||||
<div style="" class="anli_1">
|
||||
<div style="" class="anli_2">
|
||||
<topBar></topBar>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div style="" class="anli_3">
|
||||
<div style=" " class="anli_4">数字化校园
|
||||
</div>
|
||||
<div style="" class="anli_5">
|
||||
基于MOOC的网络教育综合应用平台，是新元素公司研发的一整套完善、可靠的教育信息化平台，采用先进的互联网技术和一流媒体技术，充分融合了分布式架构和P2P技术，在利用现有网络带宽的基础上极大地提高网络互动教学的质量，同时提供强大的后台管理和便捷的、人性化的操作。除此之外，新元素还通过校园综合管理平台、校园门户网系统、校园3DVR全景等校园软件系统的定制，全力打造新型的数字化校园。
|
||||
</div>
|
||||
<img style="" class="anli_6" src="http://www.jsxinyuansu.com/statics/gongsi/images/llwz.png" alt="">
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="anli_7" style="">
|
||||
<button class="left" id="anli_8" style="" @click="plusSlides(-1)">
|
||||
</button>
|
||||
<div class="anli_9" style="">
|
||||
|
||||
<div class="slideshow">
|
||||
<div class="slides">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915101452542.png" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915101635395.png" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915101731803.png" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0925/20170925093543226.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button class="left" id="anli_10" style="" @click="plusSlides(1)">
|
||||
</button>
|
||||
</div>
|
||||
<div class="anli_11" style="">
|
||||
<button class="left" @click="handerback">上一篇：行业门户网</button>
|
||||
<button class="left" @click="handerto">下一篇：智慧旅游服务产品</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'anLi',
|
||||
components: {
|
||||
topBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 轮播事件
|
||||
plusSlides(n) {
|
||||
const slides = document.querySelector('.slides');
|
||||
const slideWidth = slides.clientWidth / 4;
|
||||
this.slideIndex = (this.slideIndex + n + 4) % 4;
|
||||
slides.style.transform = `translateX(-${this.slideIndex * slideWidth}px)`;
|
||||
},
|
||||
// 下一篇跳转路由
|
||||
handerto(){
|
||||
this.$router.push({name:'wisdomPlay'})
|
||||
},
|
||||
handerback(){
|
||||
this.$router.push({name:'anLi'})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
background-color: #fff;
|
||||
/* 平滑放大效果 */
|
||||
}
|
||||
|
||||
.left:hover {
|
||||
transform: scale(1.1);
|
||||
/* 放大至1.1倍原大小 */
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
|
||||
width: 35.4vw;
|
||||
height: 42vh;
|
||||
margin-top: 2.8vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
width: 400%;
|
||||
height: 100%;
|
||||
/* 4张图片，每张占25% */
|
||||
|
||||
}
|
||||
|
||||
.slides img {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.anli_1 {
|
||||
padding-left: 10vw;
|
||||
|
||||
.anli_2 {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
.anli_3 {
|
||||
width: 60vw;
|
||||
height: 300px;
|
||||
margin-left: 10vw;
|
||||
margin-top: 6vh;
|
||||
}
|
||||
|
||||
.anli_4 {
|
||||
text-align: center;
|
||||
height: 6vh;
|
||||
line-height: 6vh;
|
||||
color: #4a4a4a;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.anli_5 {
|
||||
color: #757272;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
margin-top: 20px;
|
||||
text-indent: 26px;
|
||||
}
|
||||
|
||||
.anli_6 {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
margin-top: 3vh;
|
||||
display: block;
|
||||
margin-bottom: 6vh;
|
||||
}
|
||||
|
||||
.anli_7 {
|
||||
width: 70vw;
|
||||
height: 60vh;
|
||||
margin-left: 5vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
#anli_8 {
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/alzuo.png);
|
||||
height: 12vh;
|
||||
width: 3vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.anli_9 {
|
||||
width: 40vw;
|
||||
height: 60vh;
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/anlik1.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#anli_10 {
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/alyou.png);
|
||||
height: 12vh;
|
||||
width: 3vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.anli_11 {
|
||||
width: 40vw;
|
||||
height: 5vh;
|
||||
margin-left: 20vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8vh;
|
||||
margin-bottom: 8vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<div style="" class="anli_1">
|
||||
<div style="" class="anli_2">
|
||||
<topBar></topBar>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div style="" class="anli_3">
|
||||
<div style=" " class="anli_4">智慧旅游服务产品
|
||||
</div>
|
||||
<div style="" class="anli_5">
|
||||
智慧旅游服务产品是新元素基于“互联网+”和文化创意的主要技术和产品，充分体现了文化与科技融合、互联网+产业的应用与推广。该类产品包括：景区或者地域旅游自媒体体系（门户、微博、微信、手机APP等）、景区或者地域旅游电子商务平台、虚拟景区、游娱互动平台、景区或者地域旅游综合管理应用平台、景区导视系统等。该系列产品已在20多家客户成功实施。
|
||||
</div>
|
||||
<img style="" class="anli_6" src="http://www.jsxinyuansu.com/statics/gongsi/images/llwz.png" alt="">
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="anli_7" style="">
|
||||
<button class="left" id="anli_8" style="" @click="plusSlides(-1)">
|
||||
</button>
|
||||
<div class="anli_9" style="">
|
||||
|
||||
<div class="slideshow">
|
||||
<div class="slides">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915102712229.png" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915102823514.png" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915102903996.jpg" alt="">
|
||||
<img src="http://www.jsxinyuansu.com/uploadfile/2017/0915/20170915102903996.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button class="left" id="anli_10" style="" @click="plusSlides(1)">
|
||||
</button>
|
||||
</div>
|
||||
<div class="anli_11" style="">
|
||||
<button class="left" @click="handerback">上一篇：数字化校园</button>
|
||||
<button class="left" @click="handerto">下一篇：文创设计</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'anLi',
|
||||
components: {
|
||||
topBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 轮播事件
|
||||
plusSlides(n) {
|
||||
const slides = document.querySelector('.slides');
|
||||
const slideWidth = slides.clientWidth / 4;
|
||||
this.slideIndex = (this.slideIndex + n + 4) % 4;
|
||||
slides.style.transform = `translateX(-${this.slideIndex * slideWidth}px)`;
|
||||
},
|
||||
// 下一篇跳转路由
|
||||
handerto(){
|
||||
this.$router.push({name:'culturalDesign'})
|
||||
},
|
||||
handerback(){
|
||||
this.$router.push({name:'numSchool'})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
background-color: #fff;
|
||||
/* 平滑放大效果 */
|
||||
}
|
||||
|
||||
.left:hover {
|
||||
transform: scale(1.1);
|
||||
/* 放大至1.1倍原大小 */
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
|
||||
width: 35.4vw;
|
||||
height: 42vh;
|
||||
margin-top: 2.8vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
width: 400%;
|
||||
height: 100%;
|
||||
/* 4张图片，每张占25% */
|
||||
|
||||
}
|
||||
|
||||
.slides img {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.anli_1 {
|
||||
padding-left: 10vw;
|
||||
|
||||
.anli_2 {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
.anli_3 {
|
||||
width: 60vw;
|
||||
height: 300px;
|
||||
margin-left: 10vw;
|
||||
margin-top: 6vh;
|
||||
}
|
||||
|
||||
.anli_4 {
|
||||
text-align: center;
|
||||
height: 6vh;
|
||||
line-height: 6vh;
|
||||
color: #4a4a4a;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.anli_5 {
|
||||
color: #757272;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
margin-top: 20px;
|
||||
text-indent: 26px;
|
||||
}
|
||||
|
||||
.anli_6 {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
margin-top: 3vh;
|
||||
display: block;
|
||||
margin-bottom: 6vh;
|
||||
}
|
||||
|
||||
.anli_7 {
|
||||
width: 70vw;
|
||||
height: 60vh;
|
||||
margin-left: 5vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
#anli_8 {
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/alzuo.png);
|
||||
height: 12vh;
|
||||
width: 3vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.anli_9 {
|
||||
width: 40vw;
|
||||
height: 60vh;
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/anlik1.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#anli_10 {
|
||||
background-image: url(http://www.jsxinyuansu.com/statics/gongsi/images/alyou.png);
|
||||
height: 12vh;
|
||||
width: 3vw;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.anli_11 {
|
||||
width: 40vw;
|
||||
height: 5vh;
|
||||
margin-left: 20vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8vh;
|
||||
margin-bottom: 8vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,832 @@
|
|||
<template>
|
||||
<div style="position: relative;">
|
||||
<div class="father">
|
||||
|
||||
<!-- 轮播 -->
|
||||
<topBar></topBar>
|
||||
<!-- 公司简介左边 -->
|
||||
<div class="abstract_left">
|
||||
<div class="left_list wow animate__animated animate__bounceInLeft">
|
||||
<div v-for="item in textlist" :key="item" class="absstart_left1">
|
||||
<div class="absstart_left2" @click="tonewInfo">
|
||||
<img src="../assets/img/+.png" alt="">
|
||||
</div>
|
||||
<div style="width: 4vw;">
|
||||
<div class="absstart_left3"> {{ item.month }}</div>
|
||||
<div class="absstart_left4">{{ item.day }}</div>
|
||||
</div>
|
||||
<div class="absstart_left5">
|
||||
<span class="left_title" @click="handertext(item.id)">{{ item.title }}</span>
|
||||
<div class="left_text"> {{ item.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 公司简介右边 -->
|
||||
<div style=" width: 32vw; margin-left: 6vw;"
|
||||
class="right_list wow animate__animated animate__bounceInRight">
|
||||
<div class="absstart_right2"> 公司简介/ABOUT</div>
|
||||
<h1 class="absstart_right3">10年专注，成就卓越</h1>
|
||||
<span style="color: #636363;font-size: 1vw;">江苏新元素 ——为您提供优质互联网服务</span>
|
||||
<div class="absstart_right4" v-html=" jieshaoText "></div>
|
||||
<button class="absstart_right5" @click="handerjieshao">详情介绍</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 产品解决方案 -->
|
||||
<div class="fangan_1">
|
||||
<div class="fangan_2">
|
||||
<div class="left_list wow animate__animated animate__bounceInLeft fangan_2_1">产品与行业解决方案</div>
|
||||
</div>
|
||||
<div class="fangan_3">
|
||||
<div class="fangan_4">
|
||||
<div class="childlist" v-for="item in chanpinglist" :key="item.id">
|
||||
<div class="chanping_img" @click="tocpText(item)">
|
||||
<img style="width: 100%;height: 100%;" :src="item.coverImg" alt="">
|
||||
</div>
|
||||
<div class="fangan_5">
|
||||
<div class="fangan_title">{{ item.title }}</div>
|
||||
<div class="fangan_6">{{ item.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--通用产品与服务 -->
|
||||
<div class="xinshang_1">
|
||||
<div class="left_list wow animate__animated animate__bounceInLeft xinshang_1_1">通用产品与服务</div>
|
||||
</div>
|
||||
<div class="xinshang_2">
|
||||
<div class="xinshang_3">
|
||||
|
||||
<div class="xinshang_4">
|
||||
<div class="anli1" @click="Textinfo(0)">
|
||||
<div class="mask"></div>
|
||||
<!-- //标题 -->
|
||||
<div class="card_title_num">
|
||||
<div class="card_bord_num">
|
||||
<span>{{ title1}}</span>
|
||||
</div>
|
||||
<div class="card_text_num">{{eng1}}</div>
|
||||
</div>
|
||||
<img style="width: 100%;height: 100%;" :src="anlilist1">
|
||||
</div>
|
||||
|
||||
<div class="anli1" @click="Textinfo(1)">
|
||||
<div class="mask"></div>
|
||||
<!-- //标题 -->
|
||||
<div class="card_title_num">
|
||||
<div class="card_bord_num">
|
||||
<span>{{ title2}}</span>
|
||||
</div>
|
||||
<div class="card_text_num">{{eng2}}</div>
|
||||
</div>
|
||||
<img style="width: 100%;height: 100%;" :src="anlilist2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="anli3" @click="Textinfo(2)">
|
||||
<div class="mask"></div>
|
||||
<!-- //标题 -->
|
||||
<div class="card_title_center">
|
||||
<div class="card_bord_center">
|
||||
<span>{{ title3}}</span>
|
||||
</div>
|
||||
<div class="card_text_center">{{eng3}}</div>
|
||||
</div>
|
||||
|
||||
<img style="width: 100%;height: 100%;" :src="anlilist3">
|
||||
</div>
|
||||
<div>
|
||||
<div class="anli4" @click="Textinfo(3)">
|
||||
<div class="mask"></div>
|
||||
<div class="card_title_center">
|
||||
<div class="card_bord_center" style="cursor: pointer;">
|
||||
<span>{{title4}}</span>
|
||||
</div>
|
||||
<div class="card_text_center">{{eng4}}</div>
|
||||
</div>
|
||||
<img style="width: 100%;height: 100%;" :src="anlilist4">
|
||||
</div>
|
||||
<div class="anli5" @click="Textinfo(4)">
|
||||
<div class="mask"></div>
|
||||
<div class="card_title_center">
|
||||
<div class="card_bord_center" style="cursor: pointer;">
|
||||
<span>{{ title5}}</span>
|
||||
</div>
|
||||
<div class="card_text_center">{{ eng5 }}</div>
|
||||
</div>
|
||||
<img style="width: 100%;height: 100%;" :src="anlilist5">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 3vh"></div>
|
||||
</div>
|
||||
<!-- 客户 -->
|
||||
<!-- <div class="kehu_1">
|
||||
<div class="left_list wow animate__animated animate__bounceInLeft">我们的客户</div>
|
||||
</div>
|
||||
<div class="kehu_2"></div>
|
||||
<div>
|
||||
<el-carousel :interval="2000" trigger="click">
|
||||
<el-carousel-item v-for="item in picture" :key="item.img" style="height: 36.2vh;">
|
||||
<img :src="item.img" alt="" style="width: 100%; max-width: 100%;">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div> -->
|
||||
<div class="kehu_3"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- 导航 -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBar from '@/components/topBar.vue'
|
||||
import WOW from 'wowjs'
|
||||
|
||||
export default {
|
||||
name: 'homeComponent',
|
||||
components: {
|
||||
topBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
jieshaoText: '',
|
||||
textlist: [],//文章列表
|
||||
chanpinglist: [],//产品解决方案
|
||||
anlilist: [],
|
||||
title1: '',
|
||||
eng1:"",
|
||||
eng2:"",
|
||||
eng3:"",
|
||||
eng4:"",
|
||||
eng5:"",
|
||||
title2: '',
|
||||
title3: '',
|
||||
title4: '',
|
||||
title5: '',
|
||||
anlilist1: '',//案例欣赏
|
||||
anlilist2: '',//案例欣赏
|
||||
anlilist3: '',//案例欣赏
|
||||
anlilist4: '',//案例欣赏
|
||||
anlilist5: '',//案例欣赏
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
new WOW.WOW().init()
|
||||
},
|
||||
created() {
|
||||
this.getcard()
|
||||
this.getText()
|
||||
this.getanli()
|
||||
this.getjianjie()
|
||||
},
|
||||
methods: {
|
||||
|
||||
expand(id) {
|
||||
this.isExpanded[id] = true;
|
||||
},
|
||||
shrink(id) {
|
||||
this.isExpanded[id] = false;
|
||||
},
|
||||
//获取文章
|
||||
getText() {
|
||||
//获取接口以后把时间转成英文首写模式
|
||||
this.$http.get('/door/getHomeArticleList').then(res => {
|
||||
const monthMap = {
|
||||
1: 'Jan',
|
||||
2: 'Feb',
|
||||
3: 'Mar',
|
||||
4: 'Apr',
|
||||
5: 'May',
|
||||
6: 'Jun',
|
||||
7: 'Jul',
|
||||
8: 'Aug',
|
||||
9: 'Sep',
|
||||
10: 'Oct',
|
||||
11: 'Nov',
|
||||
12: 'Dec'
|
||||
};
|
||||
this.textlist = res.data.rows.map(item => {
|
||||
const date = new Date(item.createTime);
|
||||
const month = date.getMonth() + 1; // 月份是从0开始计数的，所以要加1
|
||||
const day = date.getDate();
|
||||
const monthInitial = monthMap[month]; // 获取月份的英文首写形式
|
||||
// 将截取到的日期和月份添加到对象中
|
||||
return {
|
||||
...item,
|
||||
month: monthInitial,
|
||||
day: day
|
||||
};
|
||||
});
|
||||
|
||||
})
|
||||
},
|
||||
//公司简介右边
|
||||
getjianjie() {
|
||||
this.$http.get('/door/getArticleList', { params: { articleCat: 1 } }).then(res => {
|
||||
this.jieshaoText = res.data.rows[0].content
|
||||
console.log(this.jieshaoText, 'llllllllaaa');
|
||||
})
|
||||
},
|
||||
//获取产品解决方案图片
|
||||
getcard() {
|
||||
this.$http.get('/door/getCategory/5',).then(res => {
|
||||
const nextid=res.data.data[0].id //获取列表第一个下标的id存本地，然后到toplist组件里里面取出来默认带出
|
||||
localStorage.removeItem('nextid')
|
||||
localStorage.setItem('nextid', nextid)
|
||||
this.chanpinglist = res.data.data.map(item => {
|
||||
// 在这里对每个item的coverImg字段前面拼接'http地址'
|
||||
const img = `${this.$baseUrl}${item.coverImg}`;
|
||||
return { ...item, coverImg: img };
|
||||
});
|
||||
|
||||
})
|
||||
},
|
||||
//获取通用产品与服务
|
||||
getanli() {
|
||||
this.$http.get('/door/getArticleList', { params: { articleCat: 8 } }).then(res => {
|
||||
const id = res.data.rows[0].id
|
||||
const articleCat = res.data.rows[0].articleCat
|
||||
localStorage.removeItem('id')
|
||||
localStorage.removeItem('articleCat')
|
||||
localStorage.setItem('id', id)
|
||||
localStorage.setItem('articleCat', articleCat)
|
||||
this.anlilist = res.data.rows.map(item => {
|
||||
// 在这里对每个item的coverImg字段前面拼接'http地址'
|
||||
const img = `${this.$baseUrl}${item.coverImg}`;
|
||||
return { ...item, coverImg: img };
|
||||
});
|
||||
|
||||
this.title1 = res.data.rows[0].title;
|
||||
this.title2 = res.data.rows[1].title;
|
||||
this.title3 = res.data.rows[2].title;
|
||||
this.title4 = res.data.rows[3].title;
|
||||
this.title5 = res.data.rows[4].title;
|
||||
|
||||
this.eng1 = res.data.rows[0].remark;
|
||||
this.eng2 = res.data.rows[1].remark;
|
||||
this.eng3 = res.data.rows[2].remark;
|
||||
this.eng4 = res.data.rows[3].remark;
|
||||
this.eng5 = res.data.rows[4].remark;
|
||||
this.anlilist1 = this.anlilist[0].coverImg;
|
||||
this.anlilist2 = this.anlilist[1].coverImg;
|
||||
this.anlilist3 = this.anlilist[2].coverImg;
|
||||
this.anlilist4 = this.anlilist[3].coverImg;
|
||||
this.anlilist5 = this.anlilist[4].coverImg;
|
||||
console.log(this.anlilist1, 'uuu');
|
||||
})
|
||||
},
|
||||
Textinfo(index) {
|
||||
const id = this.anlilist[index].id
|
||||
const articleCat=this.anlilist[index].articleCat
|
||||
localStorage.setItem('text', '案例欣赏')
|
||||
window.open(this.$router.resolve({ path: `anLi`, query: { id: id, articleCat: articleCat } }).href, '_blank');
|
||||
|
||||
},
|
||||
//公司介绍右边跳转
|
||||
handertext(id) {
|
||||
this.$router.push(`/dongtaiText?id=${id}`)
|
||||
},
|
||||
// 公司左边+号跳转
|
||||
tonewInfo() {
|
||||
localStorage.setItem('text', '新闻动态')
|
||||
window.open(this.$router.resolve({ name: 'dongTai' }).href, '_blank');
|
||||
|
||||
},
|
||||
//跳转公司介绍
|
||||
handerjieshao() {
|
||||
localStorage.setItem('text', '新闻动态')
|
||||
window.open(this.$router.resolve({ name: 'jieShao' }).href, '_blank');
|
||||
|
||||
},
|
||||
//产品方案点击事件
|
||||
tocpText(item) {
|
||||
const id=item.id
|
||||
const text = '解决方案';
|
||||
localStorage.setItem('text', text);
|
||||
const routeData = this.$router.resolve({ name: 'fangAn', query: { id:id } });
|
||||
window.open(routeData.href, '_blank');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
//
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.father {
|
||||
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.childlist {
|
||||
width: 15.5vw;
|
||||
// height: 300px;
|
||||
// background-color: green;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.anli3 {
|
||||
position: relative;
|
||||
width: 22vw;
|
||||
height: 54vh;
|
||||
overflow: hidden;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(26, 74, 138,0.8);
|
||||
/* 设置蒙版层颜色和透明度 */
|
||||
transition: top 0.3s;
|
||||
}
|
||||
|
||||
.card_title_center {
|
||||
position: absolute;
|
||||
font-size: 1.4vw;
|
||||
font-weight: 500;
|
||||
padding: 2.5vh;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bord_center {
|
||||
width: 14vw;
|
||||
height: 5vh;
|
||||
cursor: pointer;
|
||||
|
||||
background-size: cover;
|
||||
background: url('http://www.jsxinyuansu.com/statics/gongsi/images/alxsx.png') left bottom no-repeat;
|
||||
|
||||
&:hover {
|
||||
color: #bebcbcc7;
|
||||
}
|
||||
}
|
||||
|
||||
.card_text_center {
|
||||
|
||||
margin-top: 1vh;
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
}
|
||||
|
||||
.anli3:hover .mask {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.anli4 {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 22vw;
|
||||
height: 27vh;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(26, 74, 138,0.8);
|
||||
/* 设置蒙版层颜色和透明度 */
|
||||
transition: right 0.3s;
|
||||
}
|
||||
|
||||
.card_title_center {
|
||||
position: absolute;
|
||||
font-size: 1.4vw;
|
||||
font-weight: 500;
|
||||
padding: 2.5vh;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bord_center {
|
||||
width: 14vw;
|
||||
height: 5vh;
|
||||
|
||||
background-size: cover;
|
||||
background: url('http://www.jsxinyuansu.com/statics/gongsi/images/alxsx.png') left bottom no-repeat;
|
||||
|
||||
&:hover {
|
||||
color: #bebcbcc7;
|
||||
}
|
||||
}
|
||||
|
||||
.card_text_center {
|
||||
|
||||
margin-top: 1vh;
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
}
|
||||
|
||||
.anli4:hover .mask {
|
||||
right: 0;
|
||||
/* 鼠标悬停时蒙版层从右往左出现 */
|
||||
}
|
||||
|
||||
|
||||
.anli5 {
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 22vw;
|
||||
height: 27vh;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(26, 74, 138,0.8);
|
||||
/* 设置蒙版层颜色和透明度 */
|
||||
transition: right 0.3s;
|
||||
}
|
||||
|
||||
.card_title_center {
|
||||
position: absolute;
|
||||
font-size: 1.4vw;
|
||||
font-weight: 500;
|
||||
padding: 2.5vh;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bord_center {
|
||||
width: 14vw;
|
||||
height: 5vh;
|
||||
|
||||
background-size: cover;
|
||||
background: url('http://www.jsxinyuansu.com/statics/gongsi/images/alxsx.png') left bottom no-repeat;
|
||||
|
||||
&:hover {
|
||||
color: #bebcbcc7;
|
||||
}
|
||||
}
|
||||
|
||||
.card_text_center {
|
||||
|
||||
margin-top: 1vh;
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
}
|
||||
|
||||
.anli5:hover .mask {
|
||||
right: 0;
|
||||
/* 鼠标悬停时蒙版层从右往左出现 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.abstract_left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// margin-left: 10vw;
|
||||
display: flex;
|
||||
margin-top: 2vw;
|
||||
}
|
||||
|
||||
.absstart_left1 {
|
||||
// background-color: red;
|
||||
width: 23vw;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: 4vh;
|
||||
}
|
||||
|
||||
.absstart_left2 {
|
||||
width: 1vw;
|
||||
height: 2vh;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0
|
||||
}
|
||||
|
||||
.absstart_left3 {
|
||||
width: 3.2vw;
|
||||
|
||||
background-color: #2a6dbb;
|
||||
text-align: center;
|
||||
line-height: 2.7vw;
|
||||
font-size: 0.9vw;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.absstart_left4 {
|
||||
width: 3.2vw;
|
||||
background-color: #f7f7f7;
|
||||
text-align: center;
|
||||
line-height: 2.7vw;
|
||||
font-size: 1.5vw;
|
||||
font-weight: 800;
|
||||
color: #959595
|
||||
}
|
||||
|
||||
.absstart_left5 {
|
||||
width: 18vw;
|
||||
padding-bottom: 1vh;
|
||||
padding-top: 1vh;
|
||||
padding-left: 0.8vw;
|
||||
}
|
||||
|
||||
.absstart_right1 {
|
||||
width: 32vw;
|
||||
margin-left: 6vw;
|
||||
}
|
||||
|
||||
.absstart_right2 {
|
||||
width: 32vw;
|
||||
height: 3vh;
|
||||
font-size: 1vw;
|
||||
color: #2a6dbb;
|
||||
line-height: 2vh;
|
||||
border-bottom: 1px solid #2a6dbb;
|
||||
}
|
||||
|
||||
.absstart_right3 {
|
||||
margin-bottom: 1vh;
|
||||
width: 32vw;
|
||||
height: 7vh;
|
||||
font-size: 1.7vw;
|
||||
color: #1f5199;
|
||||
line-height: 7vh;
|
||||
}
|
||||
|
||||
.absstart_right4 {
|
||||
letter-spacing: 1px;
|
||||
line-height: 28px;
|
||||
font-size: 14px;
|
||||
margin-top: 1vh;
|
||||
color: #636363;
|
||||
|
||||
}
|
||||
|
||||
.absstart_right5 {
|
||||
cursor: pointer;
|
||||
width: 5vw;
|
||||
height: 5vh;
|
||||
background-color: #3498db;
|
||||
border-radius: 5px;
|
||||
font-size: 0.8vw;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
line-height: 5vh;
|
||||
margin-left: 25vw;
|
||||
margin-top: 2vh;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.fangan_1 {
|
||||
width: 75vw;
|
||||
margin-left: 2.5vw;
|
||||
margin-top: 1vw;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.fangan_2 {
|
||||
|
||||
text-align: center;
|
||||
background-color: #f7f7f7;
|
||||
font-size: 1.5vw;
|
||||
height: 6vh;
|
||||
border-bottom: 1px solid #d7d4d4;
|
||||
padding-top: 2vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #333333;
|
||||
|
||||
.fangan_2_1 {
|
||||
width: 14vw;
|
||||
height: 6vh;
|
||||
border-bottom: 2px solid #e60012;
|
||||
}
|
||||
}
|
||||
|
||||
.fangan_3 {
|
||||
|
||||
background-color: #f7f7f7;
|
||||
display: flex;
|
||||
margin-top: 7vh;
|
||||
}
|
||||
|
||||
.fangan_4 {
|
||||
|
||||
width: 68vw;
|
||||
padding-left: 4vw;
|
||||
padding-right: 4vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fangan_5 {
|
||||
overflow: hidden;
|
||||
height: 15vh;
|
||||
background-color: #fff;
|
||||
padding: 2vh;
|
||||
}
|
||||
|
||||
.fangan_6 {
|
||||
width: 14vw;
|
||||
height: 13vh;
|
||||
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
margin-top: 1vh;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.xinshang_1 {
|
||||
text-align: center;
|
||||
background-color: #f7f7f7;
|
||||
font-size: 1.5vw;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #d7d4d4;
|
||||
padding-top: 4vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.xinshang_1_1 {
|
||||
width: 11vw;
|
||||
height: 6.4vh;
|
||||
|
||||
border-bottom: 2px solid #e60012;
|
||||
}
|
||||
|
||||
.xinshang_2 {
|
||||
width: 75vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 5vh;
|
||||
padding-bottom: 4vh;
|
||||
|
||||
.xinshang_3 {
|
||||
|
||||
|
||||
// margin-left: 2vw;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.xinshang_4 {
|
||||
width: 22vw;
|
||||
|
||||
.anli1 {
|
||||
width: 22vw;
|
||||
|
||||
height: 27vh;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card_title {
|
||||
position: absolute;
|
||||
font-size: 1.4vw;
|
||||
font-weight: 500;
|
||||
padding: 2.5vh;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bord {
|
||||
width: 14vw;
|
||||
height: 5vh;
|
||||
background-size: cover;
|
||||
margin-left: 10vw;
|
||||
background: url('http://www.jsxinyuansu.com/statics/gongsi/images/alxsx.png') left bottom no-repeat;
|
||||
|
||||
&:hover {
|
||||
color: #bebcbcc7;
|
||||
}
|
||||
}
|
||||
|
||||
.card_text {
|
||||
margin-top: 1vh;
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
|
||||
.card_title_num {
|
||||
position: absolute;
|
||||
font-size: 1.4vw;
|
||||
font-weight: 500;
|
||||
padding: 2.5vh;
|
||||
margin-left: 5.5vw;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card_bord_num {
|
||||
cursor: pointer;
|
||||
width: 14vw;
|
||||
height: 5vh;
|
||||
text-align: right;
|
||||
background-size: cover;
|
||||
background: url('http://www.jsxinyuansu.com/statics/gongsi/images/alxsx1.png') left bottom no-repeat;
|
||||
|
||||
&:hover {
|
||||
color: #bebcbcc7;
|
||||
}
|
||||
}
|
||||
|
||||
.card_text_num {
|
||||
text-align: right;
|
||||
margin-top: 1vh;
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(26, 74, 138,0.8);
|
||||
/* 设置蒙版层颜色和透明度 */
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.anli1:hover .mask {
|
||||
left: 0;
|
||||
|
||||
/* 鼠标悬停时蒙版层向右移动消失 */
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.kehu_1 {
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
font-size: 1.6vw;
|
||||
height: 60px;
|
||||
padding-top: 4vh;
|
||||
}
|
||||
|
||||
.kehu_2 {
|
||||
height: 2vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.kehu_3 {
|
||||
height: 5vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.left_title {
|
||||
margin-top: 1vh;
|
||||
cursor: pointer;
|
||||
font-size: 0.84vw;
|
||||
}
|
||||
|
||||
.left_text {
|
||||
margin-top: 1vh;
|
||||
color: #b7b7cc;
|
||||
font-size: 0.9vw;
|
||||
}
|
||||
|
||||
.fangan_title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.chanping_img {
|
||||
width: 15.5vw;
|
||||
height: 22vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
/* 添加相对定位 */
|
||||
}
|
||||
|
||||
.chanping_img img {
|
||||
width: 100%;
|
||||
/* 图片宽度100%填充父容器 */
|
||||
height: 100%;
|
||||
/* 图片高度100%填充父容器 */
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.chanping_img:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// const { defineConfig } = require('@vue/cli-service')
|
||||
// module.exports = {
|
||||
// devServer: {
|
||||
// proxy: {
|
||||
// '/api': {
|
||||
// target: 'http://192.168.3.114:8090',
|
||||
// changeOrigin: true,
|
||||
// rewrite: path => path.replace(/^\/api/, '') // 去掉 /api 前缀
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
Loading…
Reference in New Issue