wtq/jxc4-bluetooth-printer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'!'

Browse Source
This commit is contained in:
wtq
2025-11-28 10:51:05 +08:00
commit 8b7a4c9556
17 changed files with 14211 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/App.scss Normal file
View File

@@ -0,0 +1,199 @@
body{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: #000;
}
#app{
display: flex;
flex-direction: column;
align-items: center;
}
// 导航栏头部
#nav-root{
position: sticky;
top: 0;
z-index: 99;
display: flex;
width: 100%;
justify-content: center;
background-color: rgb(255, 255, 255);
box-shadow: 0 1px 3px 1px rgb(233, 233, 233);
padding: 10px 0;
img{
height: 60px;
}
.nav{
display: flex;
width: 400px;
justify-content: space-around;
height: 60px;
line-height: 60px;
>a{
display: block;
color: rgb(0, 0, 0);
text-align: center;
padding: 0 20px;
transition: all 0.3s;
}
>a:hover{
color: #0a99ff;
transition: all 0.3s;
}
>.router-link-active{
color: #0a99ff;
border-bottom: 1px solid #0a99ff;
font-weight: bold;
}
}
}
// 介绍内容
#center{
display: flex;
justify-content: center;
width: 90%;
}
// 底部版权信息
#foot{
text-align: center;
width: 100%;
background-color: #262d33;
color: #fff;
.foot-img{
display: flex;
justify-content: center;
align-items: center;
padding: 15px 0 25px 0;
.img1{
height: 100px;
margin-right: 50px;
}
.img-root-app{
img{
height: 150px;
border-radius: 20px;
padding: 0 5px;
}
}
}
.copyright{
background-color: #23292f;
color: #acaba9;
padding: 40px 0;
}
}
/* 手机端响应 */
@media screen and (max-width: 1024px) {
// 底部导航栏
#foot{
.foot-img{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 15px 0 15px 0;
.img1{
height: 100px;
margin-right: 0;
}
.img-root-app{
img{
height: 150px;
}
}
}
.copyright{
background-color: #23292f;
color: #acaba9;
padding: 30px 0;
}
}
}
@media screen and (max-width: 770px) {
// 顶部导航栏
#nav-root{
position: sticky;
display: flex;
top: 0;
z-index: 99;
width: 100%;
justify-content: center;
background-color: rgb(255, 255, 255);
box-shadow: 0 1px 3px 1px rgb(233, 233, 233);
padding: 10px 0;
img{
height: 25px;
}
.nav{
display: flex;
width: 100%;
font-size: 14px;
justify-content: space-around;
height: 15px;
line-height: 15px;
>a{
display: block;
color: rgb(0, 0, 0);
text-align: center;
padding: 0;
transition: all 0.3s;
}
>a:hover{
color: #0a99ff;
transition: all 0.3s;
}
>.router-link-active{
color: #0a99ff;
border-bottom: 0px solid #0a99ff;
font-weight: bold;
}
}
}
// 底部导航栏
#foot{
.foot-img{
padding: 5px 0 5px 0;
.img1{
height: 50px;
margin-right: 0;
}
}
.copyright{
font-size: 10px;
padding: 20px 0;
}
}
}

41
src/App.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div id="app">
<!-- 导航烂 -->
<div id="nav-root">
<img class="img1" src="http://www.jingxicaishi.com/inc/images/footer_logo.png" alt="">
<div class="nav">
<router-link to="/home"><i class="el-icon-s-home"></i> 首页</router-link>
<router-link to="/downLoad"><i class="el-icon-s-grid"></i> 应用下载</router-link>
<a href="http://www.jingxicaishi.com/" target="_blank"><i class="el-icon-s-promotion"></i> 京西菜市官网</a>
</div>
</div>
<!-- 内容 -->
<div id="center">
<router-view/>
</div>
<!-- 版权信息 -->
<div id="foot">
<div class="foot-img">
<img class="img1" src="http://www.jingxicaishi.com/inc/images/footer_logo.png" alt="">
<div>
<p>扫码关注我们</p>
<div class="img-root-app">
<img src="http://image.jxc4.com/image/f8748c780ff2141505d08e88e9a0ebcb.tem.jpg" alt="">
<img src="http://www.jingxicaishi.com/inc/images/ewm.png" alt="">
</div>
</div>
</div>
<!-- 版权 -->
<div class="copyright">
2020 © Copyright 成都若溪科技有限公司 Www.Rosy.Net.Cn 京西菜市 All Rights Reserved. 备案号：蜀ICP备18030159号
</div>
</div>
</div>
</template>
<style lang="scss">
@import './App.scss'
</style>

18
src/main.js Normal file
View File

@@ -0,0 +1,18 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'element-ui/lib/theme-chalk/index.css';
import { Carousel,CarouselItem,Button,Icon } from 'element-ui';
Vue.config.productionTip = false
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Button);
Vue.use(Icon);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

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

@@ -0,0 +1,53 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 路由懒加载
const Home = () => import('@/views/home/Home')
const DownLoad = () => import('@/views/download/downLoad')
const routes = [
// 重定向到首页
{
path: '/',
redirect: '/home',
},
// 首页
{
path: '/home',
name: 'Home',
meta: {
title: '首页'
},
component: Home
},
// 下载软件
{
path: '/downLoad',
name: 'DownLoad',
meta: {
title: '软件下载'
},
component: DownLoad
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title;
}
if (to.name !== from.name) {
next();
}
});
export default router

15
src/store/index.js Normal file
View File

@@ -0,0 +1,15 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})

217
src/views/download/downLoad.vue Normal file
View File

@@ -0,0 +1,217 @@
<template>
<div id="downLoad">
<div class="load">
<div class="left">
<h2>京西云打印机</h2>
<img src="http://image.jxc4.com/image/51c6bbfdcda010510247fd5f545e70c7.tem.png" alt="">
<a href="https://pweb.jxc4.com/printer/downLoad.html" download="京西云App" class="btn"><i class="el-icon-s-promotion"></i> 立即下载</a>
</div>
<div class="right">
<h1>扫码下载</h1>
<img src="http://image.jxc4.com/image/f8ad47131b7ef4af42fa336e2fae0773.tem.png" alt="">
</div>
</div>
<div class="img-root">
<h1>京西云打印机应用展示</h1>
<div class="img">
<img :src="item.src" alt="" v-for="item in msgImgList" :key="item.id">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msgImgList: [
{src:'http://image.jxc4.com/image/85a6eace31ae9bb3eb538634622ed38d.tem.jpg', id: 1},
{src: 'http://image.jxc4.com/image/aaea4a181152b2f8e0de0feba709f89a.tem.jpg', id: 2},
{src: 'http://image.jxc4.com/image/fde505e407602c3e57c209ad04de8512.tem.jpg', id: 3},
{src: 'http://image.jxc4.com/image/d4fb3935584597b1cf9fab909363ebb0.tem.jpg', id: 4},
{src: 'http://image.jxc4.com/image/a9d1fb0132448884164db2eea62e5521.tem.jpg', id: 5},
{src: 'http://image.jxc4.com/image/449b231470f5565d36ad39c8d0526ffa.tem.jpg', id: 6},
{src: 'http://image.jxc4.com/image/b9d180048cf19c58f69c3668bf7f1dee.tem.jpg', id: 7},
{src: 'http://image.jxc4.com/image/6ea2943126a3dd52c4b161a5067bdb35.tem.jpg', id: 8},
{src: 'http://image.jxc4.com/image/06aa29ea03b47622ac05983fea4f11cf.tem.jpg', id: 9},
{src: 'http://image.jxc4.com/image/cb7b0f2c490edb3c388bfe7e13e8cf3e.tem.jpg', id: 10},
{src: 'http://image.jxc4.com/image/94519fcc5d38fe035971afca75222653.tem.jpg', id: 11},
{src: 'http://image.jxc4.com/image/d2d6007ddf6f043045e1eafd24442027.tem.jpg', id: 12}
]
}
}
}
</script>
<style lang="scss">
#downLoad{
.load{
display: flex;
justify-content: space-evenly;
margin-top: 20px;
margin-bottom: 30px;
.left{
display: flex;
flex-direction: column;
align-items: center;
img{
width: 250px;
}
.btn{
display: inline-block;
background-color: #409eff;
font-size: 26px;
width: 350px;
margin-top: 30px;
height: 70px;
text-align: center;
line-height: 70px;
color: #fff;
border-radius: 10px;
box-shadow: 0 10px 15px 10px rgb(214, 214, 214);
}
}
.right{
display: flex;
flex-direction: column;
align-items: center;
img{
border-radius: 15px;
box-shadow: 0 10px 15px 10px rgb(194, 194, 194);
width: 82%;
}
}
}
.img-root{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
img{
width: 350px;
box-shadow: 0 10px 15px 10px rgb(194, 194, 194);
}
.img{
display: grid;
grid-template-columns: repeat(4, 22%);
grid-gap: 50px;
}
}
}
@media screen and (max-width: 1024px) {
.img-root{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px !important;
padding: 0 40px !important;
box-sizing: border-box !important;
h1{
font-size: 24px !important;
}
img{
width: 100% !important;
box-shadow: 0 2px 15px 1px rgb(194, 194, 194) !important;
border-radius: 10px !important;
}
.img{
display: grid !important;
grid-template-columns: repeat(2, 49%) !important;
grid-gap: 20px !important;
}
}
}
@media screen and (max-width: 770px) {
.load{
display: flex;
justify-content: space-around;
margin-top: 20px;
margin-bottom: 15px !important;
padding: 0 10px !important;
h2{
font-size: 20px !important;
}
.left{
display: flex;
flex-direction: column;
align-items: center;
img{
width: 100px !important;
}
.btn{
display: inline-block;
background-color: #409eff;
font-size: 16px !important;
width: 150px !important;
margin-top: 20px !important;
height: 40px !important;
text-align: center;
line-height: 40px !important;
color: #fff;
border-radius: 10px;
box-shadow: 0 2px 15px 5px rgb(214, 214, 214) !important;
}
}
.right{
display: flex;
flex-direction: column;
align-items: center;
h1{
font-size: 20px !important;
}
img{
border-radius: 10px !important;
box-shadow: 0 2px 15px 5px rgb(214, 214, 214) !important;
width: 72% !important;
}
}
}
.img-root{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px !important;
padding: 0 20px !important;
box-sizing: border-box !important;
h1{
font-size: 20px !important;
}
img{
width: 100% !important;
box-shadow: 0 2px 15px 1px rgb(194, 194, 194) !important;
border-radius: 10px !important;
}
.img{
display: grid !important;
grid-template-columns: repeat(2, 47.5%) !important;
grid-gap: 20px !important;
}
}
}
</style>

157
src/views/home/Home.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<div class="block">
<el-carousel>
<el-carousel-item v-for="item in imgList" :key="item.id">
<img ref="wImg" id="wImg" :src="item.src" alt="">
</el-carousel-item>
</el-carousel>
<div class="img-root">
<h1>京西云打印机应用展示</h1>
<div class="img">
<img :src="item.src" alt="" v-for="item in msgImgList" :key="item.id">
</div>
</div>
</div>
</template>
<script>
export default({
data() {
return {
imgList: [
{src: 'http://image.jxc4.com/image/287568692b4dde41f67e117583e785b2.tem.jpg',id: 1},
{src: 'http://image.jxc4.com/image/a50a6ec31ab477b101320a870d730029.tem.jpg',id: 2},
{src: 'http://www.jingxicaishi.com/inc/images/slider1.jpg',id: 3}
],
msgImgList: [
{src:'http://image.jxc4.com/image/85a6eace31ae9bb3eb538634622ed38d.tem.jpg', id: 1},
{src: 'http://image.jxc4.com/image/aaea4a181152b2f8e0de0feba709f89a.tem.jpg', id: 2},
{src: 'http://image.jxc4.com/image/fde505e407602c3e57c209ad04de8512.tem.jpg', id: 3},
{src: 'http://image.jxc4.com/image/d4fb3935584597b1cf9fab909363ebb0.tem.jpg', id: 4},
{src: 'http://image.jxc4.com/image/a9d1fb0132448884164db2eea62e5521.tem.jpg', id: 5},
{src: 'http://image.jxc4.com/image/449b231470f5565d36ad39c8d0526ffa.tem.jpg', id: 6},
{src: 'http://image.jxc4.com/image/b9d180048cf19c58f69c3668bf7f1dee.tem.jpg', id: 7},
{src: 'http://image.jxc4.com/image/6ea2943126a3dd52c4b161a5067bdb35.tem.jpg', id: 8},
{src: 'http://image.jxc4.com/image/06aa29ea03b47622ac05983fea4f11cf.tem.jpg', id: 9},
{src: 'http://image.jxc4.com/image/cb7b0f2c490edb3c388bfe7e13e8cf3e.tem.jpg', id: 10},
{src: 'http://image.jxc4.com/image/94519fcc5d38fe035971afca75222653.tem.jpg', id: 11},
{src: 'http://image.jxc4.com/image/d2d6007ddf6f043045e1eafd24442027.tem.jpg', id: 12}
]
}
}
})
</script>
<style lang="scss">
#center{
width: 100% !important;
}
.block{
width: 100%;
}
.el-carousel__item img {
width: 100%;
height: auto;
}
.el-carousel__container{
height: 900px;
overflow: hidden;
}
.el-carousel__item:nth-child(2n) {
height: auto;
}
.el-carousel__item:nth-child(2n+1) {
height: auto;
}
.img-root{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
img{
width: 100%;
box-shadow: 0 10px 15px 10px rgb(194, 194, 194);
border-radius: 15px;
}
.img{
display: grid;
grid-template-columns: repeat(4, 22%);
grid-gap: 50px;
}
}
@media screen and (max-width: 1024px) {
.el-carousel__container{
height: 292px;
overflow: hidden;
}
.img-root{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
padding: 0 40px;
box-sizing: border-box;
h1{
font-size: 24px;
}
img{
width: 100%;
box-shadow: 0 2px 15px 1px rgb(194, 194, 194);
border-radius: 10px;
}
.img{
display: grid;
grid-template-columns: repeat(2, 49%);
grid-gap: 20px;
}
}
}
@media screen and (max-width: 770px) {
.el-carousel__container{
height: 139px;
overflow: hidden;
}
.img-root{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
padding: 0 20px;
box-sizing: border-box;
h1{
font-size: 20px;
}
img{
width: 100%;
box-shadow: 0 2px 15px 1px rgb(194, 194, 194);
border-radius: 10px;
}
.img{
display: grid;
grid-template-columns: repeat(2, 47.5%);
grid-gap: 20px;
}
}
}
</style>