This commit is contained in:
wangting 2024-05-24 16:33:55 +08:00
parent de6b5a0001
commit c0cc4589a2
37 changed files with 1755 additions and 0 deletions

23
.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
**/*.log
tests/**/coverage/
tests/e2e/reports
selenium-debug.log
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.local
package-lock.json
yarn.lock

5
babel.config.js Normal file
View File

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

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

35
package.json Normal file
View File

@ -0,0 +1,35 @@
{
"name": "inspection-website",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^1.6.8",
"core-js": "^3.8.3",
"element-plus": "^2.7.2",
"lib-flexible": "^0.3.2",
"vue": "^3.2.13",
"vue_pageination": "^1.1.2",
"vue-quill-editor": "^3.0.6",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"swiper": "^3.4.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

17
public/index.html Normal file
View File

@ -0,0 +1,17 @@
<!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="<%= BASE_URL %>favicon.ico">
<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>

29
src/App.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<router-view/>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center; */
/* color: #2c3e50; */
overflow-y: hidden;
overflow-x: hidden;
}
nav {
/* padding: 30px; */
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

19
src/assets/css/common.css Normal file
View File

@ -0,0 +1,19 @@
.videoPlayer{
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: fill;
z-index: -999;
}
.haixing{
position: absolute;
width: 8.225rem;
height: 5.825rem;
bottom:0;
right:0;
z-index: -998;
}
.style-en{
letter-spacing: .0063rem;
}

175
src/assets/css/reset.css Normal file
View File

@ -0,0 +1,175 @@
html,
body {
height: 100%;
/* 文字风格 Sans-serif 各笔画粗细相同Serif 笔画粗细不同monospace 等宽体cursive草书fantasy梦幻 */
font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial,
'黑体', '宋体', Arial;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
}
/* 重置各标签的默认样式 */
a,
body,
center,
cite,
code,
dd,
del,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hr,
html,
img,
input,
label,
legend,
li,
mark,
ol,
p,
section,
span,
textarea,
time,
td,
th,
ul {
margin: 0;
border: 0;
padding: 0;
font-style: normal;
box-sizing: border-box;
/* 自动换行 */
word-wrap: break-word;
/* 强制英文单词断行 */
word-break: break-all;
}
/* 设置标签为块级分类 */
article,
aside,
details,
fieldset,
figcaption,
figure,
footer,
header,
main,
nav,
section {
display: block;
}
/* 去除input标签的默认样式 */
button,
input,
textarea {
-webkit-appearance: none;
font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial,
'黑体', '宋体', Arial;
border: 0;
margin: 0;
padding: 0;
font-size: 1em;
line-height: 1em;
outline: none;
background-color: transparent;
}
/* 禁止多文本框手动拖动大小 */
textarea {
resize: none;
-webkit-appearance: none;
}
/* 去掉按下的阴影盒子 */
input,
textarea,
a {
-webkit-tap-highlight-color: transparent;
}
/* 清除a标签下划线 */
a,
a:visited {
text-decoration: none;
}
a:focus,
a:active,
a:hover {
outline: none;
}
/* 清除列表前面的点 */
ol,
li,
ul {
list-style: none;
}
/* 清除IE下图片的边框 */
img {
border-style: none;
font-size: 0;
}
/* 解决chrome浏览器默认黄色背景问题 */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
/* 设置默认滚动条样式 */
::-webkit-input-placeholder {
color: #afbdcc;
}
:-moz-placeholder {
color: #afbdcc;
}
::-moz-placeholder {
color: #afbdcc;
}
:-ms-input-placeholder {
color: #afbdcc;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
::-webkit-scrollbar-track-piece {
background-color: #f5f5f5;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 6px;
}
::-webkit-scrollbar-corner {
background-color: #f5f5f5;
}
::-webkit-resizer {
background-repeat: no-repeat;
background-position: bottom right;
}

BIN
src/assets/images/1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

BIN
src/assets/images/33@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 560 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 461 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 537 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 671 B

50
src/components/bottom.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<div class="page">
<p>版权所有 江苏中业消防技术服务有限公司</p>
<p>地址连云港花果山大道3号 </p>
<p>电话0518-09876233 邮箱zy_999@163.com 网址www.jszyxiaofang.com</p>
<p> 苏ICP备2024099083号-1</p>
</div>
</template>
<script>
export default {
name: 'Bottom',
components: {
},
data(){
return{
}
},
created(){
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.page{
width: 100%;
height: 2.525rem;
background: url('@/assets/images/组 11.png') no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
p{
font-size: .2rem;
color: #fff;
line-height: .46rem;
}
}
</style>

View File

@ -0,0 +1,119 @@
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
// var isAndroid = win.navigator.appVersion.match(/android/gi);yy
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下对于2和3的屏用2倍的方案其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 24;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));

View File

@ -0,0 +1,14 @@
{
"name": "lib-flexible",
"version": "0.3.2",
"description": "移动端适配解决方案",
"main": "flexible.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"适配"
],
"author": "",
"license": "ISC"
}

28
src/main.js Normal file
View File

@ -0,0 +1,28 @@
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import './assets/css/reset.css'
import './assets/css/common.css'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import './lib/lib-flexible'
import axios from 'axios'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
const baseUrl = 'https://admin.liandaojq.com/prod-api'
axios.defaults.baseURL = baseUrl
app.config.globalProperties.$http=axios
app.config.globalProperties.$baseUrl = baseUrl
app.use(router).use(ElementPlus).mount('#app')

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

@ -0,0 +1,78 @@
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'index',
component: () => import( '@/views/index.vue'),
children:[
// 首页
{
path: 'home',
name: 'Home',
component: () => import( '@/views/pages/home.vue'),
meta: {
title: '首页',
keepAlive: true
}
},
// 走进中业
{
path: 'introduce',
name: 'Introduce',
component: () => import( '@/views/pages/introduce.vue'),
meta: {
title: '走进中业',
keepAlive: true
}
},
// 走进中业
{
path: 'information',
name: 'Information',
component: () => import( '@/views/pages/information.vue'),
meta: {
title: '资讯中心',
keepAlive: true
}
},
// 资质证书
{
path: 'honor',
name: 'honor',
component: () => import( '@/views/pages/honor.vue'),
meta: {
title: '资讯中心',
keepAlive: true
}
},
// 资质证书
{
path: 'cases',
name: 'cases',
component: () => import( '@/views/pages/cases.vue'),
meta: {
title: '资讯中心',
keepAlive: true
}
},
// 资质证书
{
path: 'recruit',
name: 'recruit',
component: () => import( '@/views/pages/recruit.vue'),
meta: {
title: '人才招聘',
keepAlive: true
}
}
]
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router

136
src/utils/request.js Normal file
View File

@ -0,0 +1,136 @@
import axios from 'axios'
// import { Notification, MessageBox, Message, Loading } from 'element-ui'
// import store from '@/store'
// import { getToken } from '@/utils/auth'
// import errorCode from '@/utils/errorCode'
// import { tansParams, blobValidate } from "@/utils/ruoyi";
// import cache from '@/plugins/cache'
// import { saveAs } from 'file-saver'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 30000
})
// request拦截器
service.interceptors.request.use(config => {
// 是否需要设置 token
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
const requestObj = {
url: config.url,
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
time: new Date().getTime()
}
const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
if (requestSize >= limitSize) {
console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制无法进行防重复提交验证。')
return config;
}
const sessionObj = cache.session.getJSON('sessionObj')
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
cache.session.setJSON('sessionObj', requestObj)
} else {
const s_url = sessionObj.url; // 请求地址
const s_data = sessionObj.data; // 请求数据
const s_time = sessionObj.time; // 请求时间
const interval = 1000; // 间隔时间(ms),小于此时间视为重复提交
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
const message = '数据正在处理,请勿重复提交';
console.warn(`[${s_url}]: ` + message)
return Promise.reject(new Error(message))
} else {
cache.session.setJSON('sessionObj', requestObj)
}
}
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
// 二进制数据则直接返回
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
return res.data
}
if (code === 401) {
if (!isRelogin.show) {
isRelogin.show = true;
MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
isRelogin.show = false;
store.dispatch('LogOut').then(() => {
location.href = '/index';
})
}).catch(() => {
isRelogin.show = false;
});
}
return Promise.reject('无效的会话,或者会话已过期,请重新登录。')
} else if (code === 500) {
Message({ message: msg, type: 'error' })
return Promise.reject(new Error(msg))
} else if (code === 601) {
Message({ message: msg, type: 'warning' })
return Promise.reject('error')
} else if (code !== 200) {
Notification.error({ title: msg })
return Promise.reject('error')
} else {
return res.data
}
},
error => {
console.log('err' + error)
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "当前网络不稳定,请稍后再试";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({ message: message, type: 'error', duration: 5 * 1000 })
return Promise.reject(error)
}
)
// 通用下载方法
export function download(url, params, filename, config) {
downloadLoadingInstance = Loading.service({ text: "正在下载数据,请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
return service.post(url, params, {
transformRequest: [(params) => { return tansParams(params) }],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob',
...config
}).then(async (data) => {
const isBlob = blobValidate(data);
if (isBlob) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下载文件出现错误,请联系管理员!')
downloadLoadingInstance.close();
})
}
export default service

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

@ -0,0 +1,159 @@
<template>
<div id="home">
<div class="top">
<div class="logo">
<div class="left">
<img src="@/assets/images/组 12.png" alt="">
</div>
<div class="right">
<!-- <img src="@/assets/images/组 12.png" alt=""> -->
</div>
</div>
<div class="menu" >
<div :class="{'item':true, 'active': activeIndex==i}" v-for="(item,i) in menuList" @click="jumpTo(i)">
{{item.name}}
</div>
</div>
<div class="main-img">
<img src="@/assets/images/组 10.png" alt="">
</div>
</div>
<router-view/>
<bottom></bottom>
</div>
</template>
<script>
import bottom from '@/components/bottom'
export default {
name: 'HomeView',
components: {
bottom
},
data(){
return{
menuList:[
{
name: '主页',
url:'/home'
},
{
name: '走进中业',
url: '/introduce'
},
{
name: '资讯中心',
url: '/information'
},
{
name: '资质证书',
url: '/honor'
},
{
name: '工程案例',
url: '/cases'
},
{
name: '人才招聘',
url: '/recruit'
},
{
name: '办公入口'
},
]
}
},
computed:{
activeIndex(){
if(this.$route.path=='/home'){
return 0
}
if(this.$route.path=='/introduce'){
return 1
}
if(this.$route.path=='/information'){
return 2
}
if(this.$route.path=='/honor'){
return 3
}
if(this.$route.path=='/cases'){
return 4
}
if(this.$route.path=='/recruit'){
return 5
}
},
},
created(){
if(this.$route.path=='/'){
this.$router.push('/home')
}
},
methods:{
jumpTo(i){
this.activeIndex = i
this.$router.push({path: this.menuList[i].url})
}
}
}
</script>
<style lang="scss" scoped>
#home{
width: 100%;
.top{
.logo{
position: fixed;
z-index: 999;
height: 1.25rem;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4.5rem;
.left{
img{
width: 3.125rem;
height: auto;
}
}
}
.menu{
position: fixed;
z-index: 999;
top: 1.25rem;
width: 100%;
height: .8rem;
background-color: #171A89;
display: flex;
padding-left: 4.5rem;
.item{
width: 2.125rem;
height: 100%;
text-align: center;
line-height: .8rem;
color: #fff;
font-size: .25rem;
cursor: pointer;
}
.active{
background-color: #E7000A;
}
}
.main-img{
img{
margin-top: 2.05rem;
width: 100%;
height: 8.5625rem;
}
}
}
}
</style>

69
src/views/pages/cases.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<div class="page">
<div class="list">
<div class="item" v-for="i in 8">
<img src="@/assets/images/15探海神龟.jpg" alt="">
<div class="title">安全生产许可证</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Bottom',
components: {
},
data(){
return{
}
},
created(){
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.page{
.list{
display: flex;
flex-wrap: wrap;
padding: 1rem 2.375rem;
background-color: #fff;
/* justify-content: space-between; */
.item{
width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: .375rem;
position: relative;
height: 3.75rem;
img{
width: 90%;
height: 100%;
}
.title{
position: absolute;
font-size: .25rem;
color: #fff;
height: .6rem;
line-height: .6rem;
width: 90%;
background-color: rgba(230, 0, 18, .5);
bottom: 0;
text-align: center;
}
}
}
}
</style>

310
src/views/pages/home.vue Normal file
View File

@ -0,0 +1,310 @@
<template>
<div class="page">
<div class="about">
<div class="title">
<div class="zh-title">关于我们</div>
<div class="en-title">
<span class="line"></span>
<span class="title">ABOUT US</span>
<span class="line"></span>
</div>
</div>
<div class="content">
<div class="left">
<img src="@/assets/images/15探海神龟.jpg" alt="">
</div>
<div class="right">
<div class="indroduce">
江苏中业消防技术服务有限公司位于江苏省连云港市注册资本1000万元具备消防设施工程专业承包贰级建筑装修装饰工程专业承包贰级施工劳务不分等级资质同时具备建筑消防设施检测维保评估资质是一家集设计咨询消防技术咨询消防工程技术服务消防施工火灾隐患排查整治指导及消防设施维护保养检测安全评估为一体的综合性消防技术服务机构一直致力于消防领域的科学研究与社会消防技术服务实现品牌创造与效益双赢
</div>
<div class="menu">
<div class="item">
<img src="@/assets/images/企业介绍(1).png" alt="">
<span>公司介绍</span>
</div>
<div class="item">
<img src="@/assets/images/组织架构管理.png" alt="">
<span>组织机构</span>
</div>
<div class="item">
<img src="@/assets/images/资质.png" alt="">
<span>资质证书</span>
</div>
</div>
</div>
</div>
</div>
<div class="case">
<div class="title">
<div class="zh-title">工程案例</div>
<div class="en-title">
<span class="line"></span>
<span class="title">CASES</span>
<span class="line"></span>
</div>
</div>
<div class="list">
<div class="item" v-for="i in 8">
<img src="@/assets/images/15探海神龟.jpg" alt="">
<div class="title">探海神龟</div>
</div>
</div>
</div>
<div class="information">
<div class="title">
<div class="zh-title">资讯中心</div>
<div class="en-title">
<span class="line"></span>
<span class="title">NEWS</span>
<span class="line"></span>
</div>
</div>
<div class="content">
<div class="menu">
<div :class="{'item':true, 'active': activeIndexInfo==i}"
v-for="(item,i) in informationMenu" @click="selectTab(i)">{{item.name}}</div>
</div>
<div class="list">
<div class="left">
<div class="item" v-for="i in 5">
<span class="title">中业消防获第一批成都工业精品认定</span>
<span class="time">2019-2-13</span>
</div>
</div>
<div class="right">
<div class="item" v-for="i in 2">
<img src="@/assets/images/15探海神龟.jpg" alt="">
<div class="title">中业消防获第一批成都工业精品认定</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
},
data(){
return{
activeIndexInfo: 0,
informationMenu:[
{name:'公司新闻'},
{name:'行业动态'},
{name:'消防规范'}
]
}
},
created(){
},
methods:{
selectTab(i){
this.activeIndexInfo = i
}
}
}
</script>
<style lang="scss" scoped>
.title{
text-align: center;
.zh-title{
color: #1D2088;
font-size: .5rem;
font-weight: bold;
letter-spacing: .025rem;
font-family: 'Source Han Sans CN';
}
.en-title{
display: flex;
align-items: center;
justify-content: center;
letter-spacing: .0125rem;
margin-top: .28rem;
.line{
display: inline-block;
width: .85rem;
height: .0125rem;
background-color: #B2B2B2;
margin: .3rem;
}
.title{
font-size: .225rem;
color: #B2B2B2;
line-height: .6rem;
font-family: Arial;
}
}
}
.page{
background: url('@/assets/images/组 11 (1).png') no-repeat;
background-size: 100% auto;
background-position: 0 5.4rem;
.about{
margin-top: 1.25rem;
.content{
margin: .75rem 4.3rem 1.25rem 4.3rem;
display: flex;
justify-content: space-between;
.left{
img{
width: 7.025rem;
height: 4.925rem;
}
}
.right{
.indroduce{
width: 7.5rem;
font-size: .225rem;
color: #333333;
line-height: .6rem;
font-family: Source Han Sans CN;
}
.menu{
display: flex;
margin-top: .14rem;
.item{
width: 1.625rem;
height: .5rem;
background: #1D2088;
border-radius: .075rem;
margin-right: .175rem;
display: flex;
justify-content: center;
align-items: center;
img{
width: auto;
height: .25rem;
}
span{
font-size: .2rem;
color: #FFFFFF;
margin-left: .1rem;
}
}
}
}
}
}
.case{
margin-top: 3.55rem;
.list{
display: flex;
margin-top: .85rem;
flex-wrap: wrap;
justify-content: center;
.item{
width: 4.9rem;
height: 3.75rem;
padding: 0 .275rem;
margin-bottom: .55rem;
position: relative;
img{
width: 100%;
height: 100%;
}
.title{
position: absolute;
height: .55rem;
width: 4.35rem;
background: RGBA(207, 70, 75, .6);
bottom: 0;
font-size: .225rem;
color: #FFFFFF;
line-height: .55rem;
font-family: Source Han Sans CN;
}
}
}
}
.information{
margin-top: 1.6rem;
.content{
.menu{
display: flex;
justify-content: center;
.item{
width: 1.65rem;
height: .475rem;
border-radius: .2375rem;
border: .0125rem solid #CCCCCC;
font-size: .225rem;
color: #666666;
line-height: .475rem;
text-align: center;
margin: .625rem .125rem;
cursor: pointer;
}
.active{
background: #E60012;
color: #fff;
border: none;
}
}
}
.list{
margin: 0 2.375rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
.left{
width: 8.25rem;
.item{
width: 100%;
height: .75rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: .2rem;
color: #282828;
border-bottom: .0125rem solid #DADADA;
&:last-child{
border: none;
}
.time{
color: #666666;
font-size: .175rem;
}
}
}
.right{
display: flex;
.item{
width: 4.675rem;
height: 3.2875rem;
margin-left: .4rem;
position: relative;
img{
width: 100%;
height: 100%;
}
.title{
position: absolute;
width: 4.675rem;
height: .475rem;
background-color: RGBA(0, 0, 0, .5);
font-size: .2rem;
color: #FFFFFF;
line-height: .475rem;
bottom: 0;
}
}
}
}
}
}
</style>

61
src/views/pages/honor.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div class="page">
<div class="list">
<div class="item" v-for="i in 5">
<img src="@/assets/images/15探海神龟.jpg" alt="">
<div class="title">安全生产许可证</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Bottom',
components: {
},
data(){
return{
}
},
created(){
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.page{
.list{
display: flex;
flex-wrap: wrap;
padding: 1rem 2.475rem;
background-color: #fff;
/* justify-content: space-between; */
.item{
width: 33.3%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: .375rem;
img{
width: auto;
height: 4rem;
}
.title{
margin-top: .125rem;
font-size: .25rem;
color: #333333;
}
}
}
}
</style>

View File

@ -0,0 +1,149 @@
<template>
<div class="page">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="公司新闻" name="1">
<div class="item-1">
<div class="item" v-for="i in 9">
<img src="@/assets/images/15探海神龟.jpg" alt="">
<div class="info">
<div class="title">新闻名称新闻标题长长的标题</div>
<div class="time">2019-3-1</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="行业动态" name="2">
<!-- <div class="item-2">
<img src="@/assets/images/组 21 拷贝.png" alt="">
</div> -->
</el-tab-pane>
<el-tab-pane label="消防规范" name="3">
<!-- <div class="item-3">
<div class="item" v-for="i in 5">
<img src="@/assets/images/15探海神龟.jpg" alt="">
<div class="info">
<div class="title"></div>
<div class="time"></div>
</div>
</div>
</div> -->
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: 'Bottom',
components: {
},
data(){
return{
activeName: '1'
}
},
created(){
},
methods:{
handleClick(tabsPaneContext,e){
console.log(tabsPaneContext)
console.log(e)
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__nav-scroll{
display: flex;
justify-content: center;
}
::v-deep .el-tabs__item:hover{
color: #1D2088;
}
::v-deep .el-tabs__item.is-active{
color: #1D2088;
}
::v-deep .el-tabs__active-bar{
background-color: #1D2088;
}
.page{
min-height: 10.75rem;
.item-1{
display: flex;
flex-wrap: wrap;
padding: 1rem 2.25rem;
.item{
width: 4.875rem;
padding: 0 .125rem;
margin-bottom: .25rem;
img{
width: 100%;
height: 3.6rem;
}
.info{
border: 1px solid #ccc;
margin-top: -4px;
height: 1.0625rem;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: .125rem;
.title{
width: 100%;
background-color: #fff;
}
}
}
}
.item-2{
margin-top: 1rem;
display: flex;
justify-content: center;
img{
width: 13.7125rem;
height: auto;
}
}
.item-3{
display: flex;
flex-wrap: wrap;
padding: 1rem 2.475rem;
background-color: #fff;
/* justify-content: space-between; */
.item{
width: 33.3%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: .375rem;
img{
width: 90%;
height: 100%;
}
.info{
margin-top: .125rem;
.title{
font-size: .25rem;
color: #333333;
}
.time{
font-size: 14px;
color: #666666;
}
}
}
}
}
</style>

View File

@ -0,0 +1,124 @@
<template>
<div class="page">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="公司介绍" name="1">
<div class="item-1">
<h3>江苏中业消防技术服务有限公司公司简介</h3>
<p>
江苏中业消防技术服务有限公司位于江苏省连云港市注册资本1000万元具备消防设施工程专业承包贰级建筑装修装饰工程专业承包贰级施工劳务不分等级资质同时具备建筑消防设施检测维保评估资质是一家集设计咨询消防技术咨询消防工程技术服务消防施工火灾隐患排查整治指导及消防设施维护保养检测安全评估为一体的综合性消防技术服务机构一直致力于消防领域的科学研究与社会消防技术服务实现品牌创造与效益双赢
</p>
<p>
公司技术力量雄厚
</p>
</div>
</el-tab-pane>
<el-tab-pane label="组织机构" name="2">
<div class="item-2">
<img src="@/assets/images/组 21 拷贝.png" alt="">
</div>
</el-tab-pane>
<el-tab-pane label="资质证书" name="3">
<div class="item-3">
<div class="item" v-for="i in 5">
<img src="@/assets/images/15探海神龟.jpg" alt="">
<div class="title">安全生产许可证</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="联系我们" name="4">
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: 'Bottom',
components: {
},
data(){
return{
activeName: '1'
}
},
created(){
},
methods:{
handleClick(tabsPaneContext,e){
console.log(tabsPaneContext)
console.log(e)
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__nav-scroll{
display: flex;
justify-content: center;
}
::v-deep .el-tabs__item:hover{
color: #1D2088;
}
::v-deep .el-tabs__item.is-active{
color: #1D2088;
}
::v-deep .el-tabs__active-bar{
background-color: #1D2088;
}
.page{
min-height: 10.75rem;
background: url('@/assets/images/1.png') no-repeat;
background-size: auto 8.25rem;
background-position: 0 1.5rem;
.item-1{
font-size: .225rem;
color: #333333;
line-height: .6rem;
font-family: Source Han Sans CN;
padding: 1rem 2.375rem;
}
.item-2{
margin-top: 1rem;
display: flex;
justify-content: center;
img{
width: 13.7125rem;
height: auto;
}
}
.item-3{
display: flex;
flex-wrap: wrap;
padding: 1rem 2.475rem;
background-color: #fff;
/* justify-content: space-between; */
.item{
width: 33.3%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: .375rem;
img{
width: 90%;
height: 100%;
}
.title{
margin-top: .125rem;
font-size: .25rem;
color: #333333;
}
}
}
}
</style>

132
src/views/pages/recruit.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<div class="page">
<div class="list">
<div class="item" v-for="i in 1">
<div class="title">
<span class="position">电气工程师 </span>
<span class="apply">申请职位</span>
</div>
<div class="content">
<div class="left">
<div class="num">招聘人数3</div>
<div class="area">工作地点连云港</div>
<div class="time">发布日期2024-2-13</div>
</div>
<div class="requirement center">
<p>岗位职责 </p>
<p>1负责建筑项目电气方案与施工图优化</p>
<p>2负责强弱电工程施工管理质量进度等工作 </p>
<p> 3负责项目设备调试及配合</p>
</div>
<div class="requirement right">
<p>岗位职责 </p>
<p>1负责建筑项目电气方案与施工图优化</p>
<p>2负责强弱电工程施工管理质量进度等工作 </p>
<p> 3负责项目设备调试及配合</p>
<p> 3负责项目设备调试及配合目设备调试及配合目设备调试及配合</p>
<p> 3负责项目设备调试及配合目设备调试及配合目设备调试及配合</p>
<p> 3负责项目设备调试及配合目设备调试及配合目设备调试及配合目设备调试及配合目设备调试及配合</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Bottom',
components: {
},
data(){
return{
}
},
created(){
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.page{
.list{
display: flex;
flex-wrap: wrap;
padding: 1rem 2.375rem;
background-color: #fff;
/* justify-content: space-between; */
.item{
width: 100%;
padding: .375rem;
background: #EEF3F9;
position: relative;
&::after{
content: '';
position: absolute;
width: .4375rem;
height: .1rem;
background: #E60012;
left: 1.1rem;
top: 0;
}
.title{
display: flex;
justify-content: space-between;
.position{
font-size: .375rem;
color: #000000;
}
.apply{
width: 1.575rem;
height: .525rem;
background: #E60012;
font-size: .225rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
}
.content{
margin-top: .25rem;
display: flex;
.left{
div{
width: 2.975rem;
height: .35rem;
line-height: .35rem;
background: linear-gradient(to right,#1D2088,#EEF3F9);
margin-bottom: .125rem;
font-size: .175rem;
color: #FFFFFF;
padding-left: .175rem;
}
}
.requirement{
width: 7.5625rem;
margin-left: .6rem;
font-size: .2rem;
color: #000000;
line-height: .45rem;
background-color: #fff;
}
.center{
}
.right{
}
}
}
}
}
</style>

4
vue.config.js Normal file
View File

@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})