This commit is contained in:
hezhengao 2024-08-08 15:13:47 +08:00
parent 6318199c53
commit ed4e925814
65 changed files with 32517 additions and 0 deletions

0
.env.development Normal file
View File

23
.gitignore vendored Normal file
View File

@ -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?

5
babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

BIN
dist.zip Normal file

Binary file not shown.

19
jsconfig.json Normal file
View File

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

20556
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

55
package.json Normal file
View File

@ -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"
]
}

15
postcss.config.js Normal file
View File

@ -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)(\/|\\)/] // 排除第三方模块中的样式
}
}
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

20
public/index.html Normal file
View File

@ -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>

BIN
public/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

48
src/App.vue Normal file
View File

@ -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>

8
src/api/globalData.js Normal file
View File

@ -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
src/api/index.js Normal file
View File

38
src/api/request.js Normal file
View File

@ -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

BIN
src/assets/img/+.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/img/biaoti.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/img/dianhua.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/assets/img/diannao.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/img/dingbu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/img/eriweima.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/img/gsjs.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
src/assets/img/jishu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
src/assets/img/left.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/assets/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
src/assets/img/phone.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/img/qq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/img/right.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/assets/img/rili.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -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>

BIN
src/assets/img/tunadui.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/img/weixing.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
src/assets/img/wenhua.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

1
src/assets/img/yewu.jpg Normal file
View File

@ -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>

BIN
src/assets/img/yewu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/assets/img/youxiang.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

1
src/assets/img/zizhi.jpg Normal file
View File

@ -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>

BIN
src/assets/img/zizhi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -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;"> 业务QQ2020674551</span>
</div>
<div style="" class="bottom_7">
<div class="bottom_8" style="">
</div>
<span style=" color:#b5b5b5;font-size: 0.7vw;"> E-mailjsxys@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>

131
src/components/phonebar.vue Normal file
View File

@ -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>

43
src/components/topBar.vue Normal file
View File

@ -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>

151
src/components/topList.vue Normal file
View File

@ -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>

8
src/eventBus.js Normal file
View File

@ -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;

34
src/main.js Normal file
View File

@ -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')

7
src/router/index.js Normal file
View File

@ -0,0 +1,7 @@
import { createRouter, createWebHistory } from "vue-router"
import routes from "./routes"
var router = createRouter({
history: createWebHistory(),
routes
})
export default router

125
src/router/routes.js Normal file
View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 => {
// itemcoverImg'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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

832
src/views/index.vue Normal file
View File

@ -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; // 01
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 //idtoplist
localStorage.removeItem('nextid')
localStorage.setItem('nextid', nextid)
this.chanpinglist = res.data.data.map(item => {
// itemcoverImg'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 => {
// itemcoverImg'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>

12
vue.config.js Normal file
View File

@ -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 前缀
// }
// }
// }
// }

6645
yarn.lock Normal file

File diff suppressed because it is too large Load Diff