Skip to content

dongjipeng / wanda_big_screen

Go to a project
Commit 4241397b by dongjipeng
Options

'创建万达样品库管理系统'

parents
Showing with 1556 additions and 0 deletions
.browserslistrc 0 → 100644
> 1%
last 2 versions
.editorconfig 0 → 100644
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
.eslintrc.js 0 → 100644
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
.gitignore 0 → 100644
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
# happypluswab
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn run serve
```
### Compiles and minifies for production
```
yarn run build
```
### Run your tests
```
yarn run test
```
### Lints and fixes files
```
yarn run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/app'
]
}
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "happypluswab",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"core-js": "^2.6.5",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"lint-staged": "^8.1.5",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"swiper": "^4.5.0",
"vue-template-compiler": "^2.5.21"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
postcss.config.js 0 → 100644
module.exports = {
plugins: {
autoprefixer: {}
}
}
public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<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">
<title>happypluswab</title>
</head>
<body>
<noscript>
<strong>We're sorry but happypluswab 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>
public/leader.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="leader_app"></div>
</body>
</html>
public/login.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="login"></div>
</body>
</html>
public/search.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="product_app"></div>
</body>
</html>
public/video_demo.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="video_app">
</div>
</body>
</html>
src/App.vue 0 → 100644
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
src/assets/css/main.less 0 → 100644
.content {width: 100%; height: 100%}
.main {width: 100%; position: absolute; padding: 1px 138px 0; background: url(../img/main_bg.jpg) no-repeat center top; background-size: 100% 100%; height: ~"calc(100% - 250px)"; box-sizing: border-box; margin-top: 249px;}
.header {width: 100%;padding: 0 138px;box-sizing: border-box;background: url("../img/header_bg.jpg") no-repeat center top;background-size: 100% 100%;
box-shadow: 0 17px 17px -17px #0d3a6c; position: fixed; left: 0; top: 0; z-index: 1000;
.header-inner {height: 250px; display: flex; align-items: center; justify-content: space-between;
.header-lf {display: flex; align-items: center;
/*em, h2 {display: inline-block; vertical-align: middle}*/
.logo-box {
img {width: 410px; height: auto}
}
h2 {padding-left: 60px; font-size: 72px; color: #ffffff; letter-spacing: 16px;
b {font-size: 40px; font-weight: normal; padding-left: 20px; letter-spacing: 4px}
}
}
.header-rt {display: flex; align-items: center;
.search-bar {position: relative;
input {padding: 22px 128px 22px 30px; line-height: 66px; width: 1076px; box-sizing: border-box; background-color: #ffffff; font-size: 36px; border-radius: 14px;
font-family: "FZLanTingHei-L-GBK", "Helvetica Neue", "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53", Helvetica, STHeiTi, sans-serif;
}
s {display: block; width: 52px; height: 52px; background: url(../img/ico/ico_search.png) no-repeat center center;position: absolute; right: 32px; top: 50%; margin-top: -26px; background-size: 100% 100%;
cursor: pointer; z-index: 100;
&:after {
content: "";
display: block;
width: 1px;
height: 50px;
background-color: #cacaca;
position: absolute;
left: -36px;
top: 50%;
transform: translateY(-50%);
}
}
}
.go-back {font-size: 54px; color: #ffffff; cursor: pointer}
a.home {display: block; width: 66px; height: 66px; background: url(../img/ico/ico_home.png) no-repeat center center;background-size: 100% 100%; margin-left: 120px;}
}
}
}
src/assets/css/reset.css 0 → 100644
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img { border:none; }
img{display: block;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
input::-moz-focus-inner { border:none; padding:0; }
select, input { vertical-align:middle; }
select, input, textarea { font-size:12px; margin:0; }
input[type="text"], input[type="password"], textarea { outline-style:none; -webkit-appearance:none; }
textarea { resize:none; }
input,textarea{background: none; border: none;}
table { border-collapse:collapse; }
body { width: 100%; margin: 0 auto; color:#333; background:#fff; }
html {font-family: "FZLanTingHei-L-GBK", "Helvetica Neue", "微软雅黑", "黑体", Helvetica, STHeiTi, sans-serif;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
a { color:#666; text-decoration:none; }
a:visited { color:#1a1a1a; }
a:hover, a:active, a:focus {text-decoration:none; }
html, body {height: 100%; width: 100%}
em, b, i {font-style: normal}
src/components/BrandTitle.vue 0 → 100644
<template>
<div class="m-title">{{title}}</div>
</template>
<script>
export default {
name: 'brandTitle',
props: {
title: {
type: String,
required: true
}
}
}
</script>
<style scoped lang="less">
.m-title {padding: 40px 0 40px 36px; line-height: 68px;font-size: 46px; color: #ffffff; position: relative; box-sizing: border-box;
&:before {content: "";display: block;width: 10px;height: 40px;background-color: #ffffff;border-radius: 5px;position: absolute;left: 0;top: 50%;margin-top: -20px}
}
</style>
src/components/Header.vue 0 → 100644
<template>
<div class="header">
<div class="header-inner">
<div class="header-lf">
<a href="" class="logo-box"><img src="../assets/img/logo.png" alt=""></a>
<h2>{{title}} <b>欢迎光临！</b></h2>
</div>
<div class="header-rt">
<!--<div class="search-bar" v-if="search">
<input type="text" placeholder="请输入名称、品牌、品种、编号">
<s></s>
</div>-->
<!--<span class="go-back">返回</span>-->
<!--<a href="" class="home" v-if="home"></a>-->
<slot name="search"></slot>
<slot name="go-back"></slot>
<slot name="home"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Header',
props: {
title: {
type: String,
default: '万达集团样品库管理系统'
}
}
}
</script>
<style scoped lang="less">
@import '../assets/css/function.less';
@import '../assets/css/main.less';
</style>
src/components/SearchItem.vue 0 → 100644
<template>
<div class="pro-item">
<div class="pro-item-inner">
<span class="img-box">
<img v-if="searchData.FilePath" :src="searchData.FilePath" alt="">
<img v-else src="../assets/img/swiper_img/s3.jpg" alt="">
</span>
<ol>
<li>名称：<em>{{searchData.SampleName}}</em></li>
<li>品牌：<em>{{searchData.SampleBrand}}</em></li>
<li>供方：<em>{{searchData.SupplierName}}</em></li>
<li>编号：<em>{{searchData.sample_location}}</em></li>
</ol>
</div>
</div>
</template>
<script>
export default {
name: 'searchItem',
props: {
searchData: {
type: Object
}
}
}
</script>
<style scoped lang="less">
.pro-item {margin-bottom: 50px; width: 33.33%; box-sizing: border-box; cursor: pointer;
.pro-item-inner {background-color: #ffffff; border-radius: 18px; display: flex; align-items: center; overflow: hidden;}
.img-box {width: 430px; height: 364px; text-align: center; display: block; position: relative; overflow: hidden;
img {width: auto; height: auto; max-width: 100%; margin: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)}
}
ol {padding-left: 70px; flex: 1; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
li {font-size: 40px; color: #000000; line-height: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
em {color: #333333}
}
}
}
</style>
src/http/api.js 0 → 100644
import { get } from './help'
const getProductList = get('/api/search')
const getProductDetail = get('/api/detail')
export {
getProductList,
getProductDetail
}
src/http/help.js 0 → 100644
import axios from 'axios'
axios.defaults.baseURL = 'http://112.125.89.13/'
const ERR_OK = 0
export function get (url) {
return function (params) {
return axios.get(url, {
params
}).then(function (res) {
if (res.data) {
return res.data
}
})
}
}
src/main.js 0 → 100644
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
src/modules/leader/index.js 0 → 100644
import Vue from 'vue'
import leader from './index.vue'
import router from './router'
import '../../assets/css/reset.css'
import '../../assets/css/function.less'
new Vue({
router,
render: h => h(leader)
}).$mount('#leader_app')
src/modules/leader/index.vue 0 → 100644
<template>
<div class="leader">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'console'
}
</script>
<style scoped>
</style>
src/modules/leader/router.js 0 → 100644
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'leader',
component: r => { require(['./Leader'], r) },
meta: { title: '领导视图' }
}
]
export default new VueRouter({
routes: routes
})
src/modules/product/ProductDetail.vue 0 → 100644
<template>
<div class="content">
<Header :search="false" :goBack="true" />
<div class="main">
<div class="product-detail">
<div class="swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in swiperImgs" :key="index">
<div class="swiper-item">
<video
class="swiper-video"
id="swiperVideo"
ref="myVideo"
width="100%"
height="100%"
v-if="item.video"
:poster="item.src"
preload="none">
<source src="../../assets/img/demo.mp4" />
</video>
<img :src="item.src" alt="">
<span class="openVideo" v-if="item.video" @click="openVide">{{play}}</span>
</div>
</div>
</div>
</div>
<div class="swiper-button">
<div class="swiper-button-prev"></div>
<div class="page-num">
<span class="page-current-number">{{currentPage}}</span> / <span class="page-all-number">{{allPage}}</span>
</div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="tab-warp">
<div class="tab-click">
<span class="base-infor" :class="{active : currentTab==='baseInfor'}" @click="navClick('baseInfor')">基础信息</span>
<span class="technical-parms" :class="{active : currentTab==='technicalParms'}" @click="navClick('technicalParms')">技术参数</span>
</div>
<div class="tab-cont">
<div class="tab1" v-if="currentTab === 'baseInfor'">
<ul>
<!--<li v-for="(item, index) in tabData1" :key="index"><b>{{item.name}}</b> <span>{{item.value}}</span></li>-->
<li><b>样品名称</b> <span>{{sampleName}}</span></li>
<li><b>样品品牌</b> <span>{{sampleBrand}}</span></li>
<!-- <li><b>品牌特点</b> <span>{{sampleCharacteristic}}</span></li> -->
<li><b>样品品种</b> <span>{{sampleVarietyName}}</span></li>
<li><b>样品供方</b> <span>{{sampleSupplier}}</span></li>
<li><b>展位编号</b> <span>{{boothNumber}}</span></li>
</ul>
</div>
<div class="tab2" v-else>
<ul>
<li :class="{'demo-params': item.params}" v-for="(item, index) in sampleTechParam" :key="index">
<b>{{item.SampleVarietyAttributeName}}</b>
<span>{{item.SampleVarietyAttributeValue}}</span>
<span v-if="item.params" style="padding-left: 0">
<p v-for="(m, k) in item.params" :key="k">{{m.name}}: {{m.value}}</p>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import Header from '../../components/Header'
import { getProductDetail } from '../../http/api'
export default {
name: 'productDetail',
data () {
return {
swiperImgs: [
{
'src': require('../../assets/img/swiper_img/s1.jpg'),
'video': '../../xxx.mp4'
},
{
'src': require('../../assets/img/swiper_img/s2.jpg')
},
{
'src': require('../../assets/img/swiper_img/s3.jpg')
}
],
play: '播放视频',
currentPage: '1',
allPage: '3',
currentTab: 'baseInfor',
sampleId: '',
sampleName: '', // 样品名称
sampleBrand: '', // 样品品牌
// sampleCharacteristic: '', // 样品特点
sampleVarietyName: '', // 样品品种
sampleSupplier: '', // 样品供方
boothNumber: '', // 展位编号
sampleTechParam: [] // 技术参数
}
},
components: {
Header
},
created () {
this.sampleId = this.$route.params.id
this.getProductDetail()
},
mounted () {
this._initSwiper()
this._playAgain()
},
methods: {
_initSwiper () {
let _this = this
var mySwiper = new Swiper('.swiper-container', {
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on: {
slideChangeTransitionEnd: function () {
console.log(this.activeIndex)
let activeIndex = this.activeIndex + 1
_this.currentPage = activeIndex
}
}
})
},
navClick (currentTab) {
this.currentTab = currentTab
},
getProductDetail () {
getProductDetail({
sampleId: this.sampleId
}).then(res => {
console.log(res)
var data = res.data
this.sampleName = data.SampleName
this.sampleBrand = data.SampleBrand
// this.sampleCharact = data.SampleCharact
this.sampleVarietyName = data.SampleVarietyName
this.sampleSupplier = data.SupplierName
this.boothNumber = data.SampleVarietyCode
this.sampleTechParam = data.attribute
})
},
openVide () {
let video = document.getElementById('swiperVideo')
if (video.paused) {
video.play()
this.play = '暂停播放'
} else {
video.pause()
this.play = '继续播放'
}
},
_playAgain () {
let _this = this
var video = document.getElementById('swiperVideo')
video.addEventListener('ended', function () {
_this.play = '重新播放'
console.log('播放完毕')
}, false)
}
},
beforeRouteLeave (to, from, next) {
to.meta.keepAlive = true
next()
}
}
</script>
<style scoped lang="less">
@import '../../../node_modules/swiper/dist/css/swiper.css';
@import '../../assets/css/function.less';
@import '../../assets/css/main.less';
.main {
.product-detail {width: 100%; padding-top: 110px; display: flex; align-items: flex-start; justify-content: center;
.swiper {width: 1900px; position: relative;
.swiper-container {box-shadow: 0 0 60px rgba(0,0,0,0.8); border-radius: 30px;}
.swiper-wrapper {
.swiper-slide {
.swiper-item {height: 1500px; width: 1900px; position: relative;
img {width: 100%; height: 100%}
.openVideo {font-size: 50px; color: #ffffff; position: absolute; right: 42px; bottom: 30px; cursor: pointer; height: 100px; line-height: 100px; padding-right: 18px; padding-left: 116px; border-radius: 12px;
background: rgba(0,0,0,0.4) url("../../assets/img/ico/ico_video.png") no-repeat 4% center;
}
.swiper-video {
width:100%;
height:100%;
object-fit:fill;
}
}
}
}
.swiper-button {position: relative; height: 100px; width: 580px; margin: 48px auto 0;
.swiper-button-prev, .swiper-button-next {top: 0;width: 100px;height: 100px; border-radius: 10px; margin-top: 0; outline: none}
.swiper-button-prev {background: #071e37 url(../../assets/img/ico/ico2.png) no-repeat center center !important;background-size: 39px 62px;}
.swiper-button-next {background: #071e37 url(../../assets/img/ico/ico1.png) no-repeat center center !important;background-size: 39px 62px;}
.page-num {width: 274px; line-height: 100px; text-align: center; height: 100px;position: absolute; left: 50%; margin-left: -137px;
color: #ffffff; top: 0; font-size: 58px; background-color: #071e37; border-radius: 10px; font-weight: lighter;
}
}
}
.tab-warp {margin-left: 8%;
.tab-click {display: flex; align-items: center;
span {height: 120px; line-height: 120px; overflow: hidden; position: relative; font-size: 48px; color: #ffffff; text-align: center;cursor: pointer;
&.base-infor {width: 338px; color: #999999; background: url(../../assets/img/l_active.png) no-repeat center center;}
&.technical-parms {width: 360px; color: #999; margin-left: -62px; background: url(../../assets/img/r.png) no-repeat center center;}
&.active {color: #0b579f;}
}
}
.tab-cont { width: 1265px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; border-top-right-radius: 20px;background-color: #ffffff; overflow: hidden;
ul {
li {font-size: 54px; color: #000; border-bottom: 1px solid #eeeeee; /*padding: 66px 0 66px 90px;*/ line-height: 226px; padding-left: 90px;
span, b{display: inline-block; vertical-align: middle; font-weight: normal}
span {color: #333333; padding-left: 100px;
p {line-height: 90px}
}
&.demo-params {padding-top: 20px; padding-bottom: 20px;
b {vertical-align: top; line-height: 90px}
}
}
}
.tab2 {
ul {
li {line-height: 210px;}
}
}
}
}
}
}
</style>
src/modules/product/ProductList.vue 0 → 100644
<template>
<div class="content">
<Header>
<div class="search-bar" slot="search">
<input
type="text"
v-model="inputVal"
placeholder="请输入名称、品牌、品种、编号"
@input="getProdList"
/>
<s></s>
</div>
<a href="" class="home" slot="home"></a>
</Header>
<div class="main">
<brandTitle :title="`混凝土砖 共${totalCount}个样品`"></brandTitle>
<div class="pro-list">
<searchItem
v-for="(item, index) in myData"
:key="index"
:searchData="item"
@click.native="goDetail(item.SampleID)"
:style="{'padding-right': (index+1) % 3 === 0 ? 0 : '64px'}"
>
</searchItem>
</div>
<div class="paginate-bar" v-if="myData.length">
<ul>
<li v-if="cur > 1">
<a href="javascript:;" @click="cur--, pageClick()">上一页</a>
</li>
<li v-if="cur === 1">
<a href="javascript:;" class="banclick">上一页</a>
</li>
<li
v-for="index in indexs"
:key="index"
v-bind:class="{'active': cur === index}"
>
<a href="javascript:;" @click="btnClick(index)">{{ index }}</a>
</li>
<li v-if="cur !== totalPage">
<a href="javascript:;" @click="cur++, pageClick()">下一页</a>
</li>
<li v-if="cur === totalPage">
<a href="javascript:;" class="banclick">下一页</a>
</li>
<li>
<a href="javascript:;"
>共<i>{{ totalPage }}</i
>页</a
>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import Header from '../../components/Header'
import brandTitle from '../../components/BrandTitle'
import searchItem from '../../components/SearchItem'
import { getProductList } from '../../http/api'
const PAGE_COUNT = 12
export default {
name: 'productList',
data () {
return {
searchData: [
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: '1-C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
},
{
imgUrl: require('../../assets/img/serch_img/m1.jpg'),
title: '混凝土砖',
brand: '国产品牌',
supplier: '深圳北林地景园林设备',
number: 'C-2-001'
}
],
inputVal: '',
myData: [],
cur: 1,
totalCount: 0,
timer: null
}
},
components: {
Header,
brandTitle,
searchItem
},
created() {
this.inputVal = this.$route.params.searchVal
this.getProdList()
},
methods: {
getProdList () {
var _this = this
if (_this.inputVal) {
if (_this.timer) {
clearTimeout(_this.timer)
}
_this.timer = setTimeout(function () {
getProductList({
search: _this.inputVal,
page: _this.cur,
perPage: PAGE_COUNT
}).then(data => {
console.log(data)
_this.myData = data.data
_this.totalCount = data.total // 数据总条数
})
}, 1000)
}
},
btnClick: function (index) {
if (index !== this.cur) {
this.cur = index
this.getProdList()
}
},
pageClick: function () {
console.log('现在在' + this.cur + '页')
this.getProdList()
},
goDetail (id) {
this.$router.push({ name: 'productDetail', params: { id: id } })
}
},
computed: {
indexs () {
let left = 1
let right = this.totalPage
let ar = []
if (this.totalPage >= 5) {
if (this.cur > 3 && this.cur < this.totalPage - 2) {
left = this.cur - 2
right = this.cur + 2
} else {
if (this.cur <= 3) {
left = 1
right = 5
} else {
right = this.totalPage
left = this.totalPage - 4
}
}
}
while (left <= right) {
ar.push(left)
left++
}
return ar
},
totalPage () {
let totalPage = this.totalCount / 12
if (totalPage <= 1) {
totalPage = 1
} else {
totalPage = parseInt(totalPage)
}
return totalPage
}
},
watch: {
cur: function (oldValue, newValue) {
console.log(arguments)
}
}
}
</script>
<style scoped lang="less">
@import "../../assets/css/function.less";
@import "../../assets/css/main.less";
.main {
width: 100%;
.pro-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.paginate-bar {
margin: auto;
text-align: center;
ul {
font-size: 0;
li {
display: inline-block;
vertical-align: middle;
cursor: pointer;
a {
padding: 12px 20px;
color: #ffffff;
font-size: 28px;
&:hover {
color: #eee;
}
&.banclick {
cursor: not-allowed;
}
i {
margin: 0 10px;
}
}
&.active a {
cursor: default;
font-weight: bold;
color: #d44950;
}
}
}
}
}
</style>
src/modules/product/Search.vue 0 → 100644
<template>
<div class="login-warp">
<div class="login-inner">
<a href="" class="logo"></a>
<h2>万达集团样品库系统</h2>
<div class="input-warp">
<input type="text" placeholder="请输入名称、品牌、品种、编号" v-model="searchVal">
<s @click="searchClick"></s>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'search',
data() {
return {
searchVal: ''
}
},
methods: {
searchClick() {
this.$router.push({name: 'productList', params: {searchVal: this.searchVal}})
}
},
beforeRouteLeave (to, from, next) {
to.meta.keepAlive = false
next()
}
}
</script>
<style scoped lang="less">
.login-warp {width: 100%; height: 100%; background: url(../../assets/img/login_bg.jpg) no-repeat center center; background-size: 100% 100%; position: relative;
.login-inner {position: absolute; left: 50%; transform: translateX(-50%); top: 450px;
a.logo {display: block; width: 752px; margin: 0 auto 100px;height: 182px; background: url(../../assets/img/login_large.png) no-repeat center/cover}
h2 {font-size: 160px; letter-spacing: 36px; color: #ffffff; text-align: center; margin-bottom: 110px}
.input-warp {position: relative; margin: auto; width: 1690px;
input {padding: 38px 190px 38px 70px; line-height: 94px; width: 100%; box-sizing: border-box; background-color: #ffffff; font-size: 60px; border-radius: 22px;
font-family: "FZLanTingHei-L-GBK", "Helvetica Neue", "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53", Helvetica, STHeiTi, sans-serif;
}
s {display: block; width: 88px; height: 88px; background: url(../../assets/img/ico/ico_search_large.png) no-repeat center/cover;
position: absolute; right: 38px; top: 50%; margin-top: -44px; cursor: pointer; z-index: 100;
&:after {
content: "";
display: block;
width: 1px;
height: 84px;
background-color: #cacaca;
position: absolute;
left: -36px;
top: 50%;
transform: translateY(-50%);
}
}
}
}
}
</style>
src/modules/product/index.js 0 → 100644
import Vue from 'vue'
import Search from './index.vue'
import router from './router'
import '../../assets/css/reset.css'
import '../../assets/css/function.less'
new Vue({
router,
render: h => h(Search)
}).$mount('#product_app')
src/modules/product/index.vue 0 → 100644
<template>
<div class="product">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'index'
}
</script>
<style scoped lang="less">
.product {width: 100%; height: 100%}
</style>
src/modules/product/router.js 0 → 100644
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'index',
redirect: '/search'
},
{
path: '/search',
name: 'search',
component: r => { require(['./Search'], r) },
meta: {
title: '搜索产品',
keepAlive: true
}
},
{
path: '/productList',
name: 'productList',
component: r => { require(['./ProductList'], r) },
meta: {
title: '产品列表',
keepAlive: true
}
},
{
path: '/productDetail',
name: 'productDetail',
component: r => { require(['./ProductDetail'], r) },
meta: {
title: '产品详情',
keepAlive: false
}
}
]
})
export default router
src/modules/video/VideoDemo.vue 0 → 100644
<template>
<div class="content">
<Header :search="false"
:home="false" />
<div class="main">
<div class="product-detail">
<div class="swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-item">
<img src="../../assets/img/swiper_img/s1.jpg"
alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="swiper-item">
<img src="../../assets/img/swiper_img/s2.jpg"
alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="swiper-item">
<img src="../../assets/img/swiper_img/s3.jpg"
alt="" />
</div>
</div>
</div>
</div>
<div class="swiper-button">
<div class="swiper-button-prev"></div>
<div class="page-num">
<span class="page-current-number">{{ currentPage }}</span> /
<span class="page-all-number">{{ allPage }}</span>
</div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="tab-warp">
<div class="tab-cont">
<ul>
<li v-for="(item, index) in tabData"
:key="index">
<b>{{ item.name }}</b> <span>{{ item.value }}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import Header from '../../components/Header'
export default {
name: 'video',
data () {
return {
currentPage: '1',
allPage: '3',
tabData1: [
{
name: '样品名称1',
value: '混凝土砖'
},
{
name: '样品品牌',
value: '过长2品牌'
},
{
name: '样品供方',
value: '深圳林地园林设备有限公司'
},
{
name: '展位编号',
value: 'C-2-001'
},
{
name: '样品材质',
value: '混凝土'
},
{
name: '样品规格',
value: '350*150*8'
},
{
name: '样品型号',
value: '350*150*8'
},
{
name: '样品特点',
value: '超薄设计、功率低'
}
],
tabData2: [
{
name: '样品名称2',
value: '混凝土砖'
},
{
name: '样品品牌',
value: '过长2品牌'
},
{
name: '样品供方',
value: '深圳林地园林设备有限公司'
},
{
name: '展位编号',
value: 'C-2-001'
},
{
name: '样品材质',
value: '混凝土'
},
{
name: '样品规格',
value: '350*150*8'
},
{
name: '样品型号',
value: '350*150*8'
},
{
name: '样品特点',
value: '超薄设计、功率低'
}
],
tabData3: [
{
name: '样品名称3',
value: '混凝土砖'
},
{
name: '样品品牌',
value: '过长2品牌'
},
{
name: '样品供方',
value: '深圳林地园林设备有限公司'
},
{
name: '展位编号',
value: 'C-2-001'
},
{
name: '样品材质',
value: '混凝土'
},
{
name: '样品规格',
value: '350*150*8'
},
{
name: '样品型号',
value: '350*150*8'
},
{
name: '样品特点',
value: '超薄设计、功率低'
}
]
}
},
components: {
Header
},
mounted () {
this._initSwiper()
},
methods: {
_initSwiper () {
let _this = this
var mySwiper = new Swiper('.swiper-container', {
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on: {
slideChangeTransitionEnd: function () {
console.log(this.activeIndex)
let activeIndex = this.activeIndex + 1
_this.currentPage = activeIndex
}
}
})
}
},
computed: {
tabData () {
let activeIndex = this.currentPage - 1
switch (activeIndex) {
case 0:
return this.tabData1
break
case 1:
return this.tabData2
break
case 2:
return this.tabData3
break
}
}
}
}
</script>
<style scoped lang="less">
@import "../../../node_modules/swiper/dist/css/swiper.css";
@import "../../assets/css/function.less";
@import "../../assets/css/main.less";
.main {
.product-detail {
width: 100%;
padding-top: 110px;
display: flex;
align-items: flex-start;
justify-content: center;
.swiper {
width: 1900px;
position: relative;
.swiper-container {
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
border-radius: 30px;
}
.swiper-wrapper {
.swiper-slide {
.swiper-item {
height: 1500px;
width: 1900px;
position: relative;
img {
width: 100%;
height: 100%;
}
}
}
}
.swiper-button {
position: relative;
height: 100px;
width: 580px;
margin: 48px auto 0;
.swiper-button-prev,
.swiper-button-next {
top: 0;
width: 100px;
height: 100px;
border-radius: 10px;
margin-top: 0;
outline: none;
}
.swiper-button-prev {
background: #071e37 url(../../assets/img/ico/ico2.png) no-repeat
center center !important;
background-size: 39px 62px;
}
.swiper-button-next {
background: #071e37 url(../../assets/img/ico/ico1.png) no-repeat
center center !important;
background-size: 39px 62px;
}
.page-num {
width: 274px;
line-height: 100px;
text-align: center;
height: 100px;
position: absolute;
left: 50%;
margin-left: -137px;
color: #ffffff;
top: 0;
font-size: 58px;
background-color: #071e37;
border-radius: 10px;
font-weight: lighter;
}
}
}
.tab-warp {
margin-left: 8%;
.tab-cont {
width: 1265px;
border-radius: 20px;
background-color: #ffffff;
overflow: hidden;
ul {
li {
font-size: 54px;
color: #000;
border-bottom: 1px solid #eeeeee; /*padding: 66px 0 66px 90px;*/
line-height: 180px;
padding-left: 90px;
span,
b {
display: inline-block;
vertical-align: middle;
font-weight: normal;
}
span {
color: #333333;
padding-left: 100px;
p {
line-height: 90px;
}
}
}
}
}
}
}
}
</style>
src/modules/video/index.js 0 → 100644
import Vue from 'vue'
import Video from './index.vue'
import router from './router'
import '../../assets/css/reset.css'
import '../../assets/css/function.less'
new Vue({
router,
render: h => h(Video)
}).$mount('#video_app')
src/modules/video/index.vue 0 → 100644
<template>
<div class="video">
<router-view></router-view>
</div>
</template>
src/modules/video/router.js 0 → 100644
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'video',
component: r => { require(['./VideoDemo'], r) },
meta: { title: '样品展示' }
}
]
export default new VueRouter({
routes: routes
})
src/router.js 0 → 100644
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
src/store.js 0 → 100644
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})
vue.config.js 0 → 100644
module.exports = {
// 基本路径
baseUrl: '/',
// 生产环境
productionSourceMap: false,
pages: {
leader: {
entry: 'src/modules/leader',
template: 'public/leader.html',
filename: 'leader.html'
},
product: {
entry: 'src/modules/product',
template: 'public/search.html',
filename: 'search.html'
},
video_demo: 'src/modules/video'
}
// devServer: {
// open: true,
// host: 'localhost',
// port: 8082,
// https: false,
// hotOnly: false,
// proxy: {
// '/api': {
// target: 'http://localhost:4000',
// changeOrigin: true,
// ws: true,
// pathRewrite: {
// '^/api': ''
// }
// }
// }
// }
}
yarn.lock 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment