Skip to content

H
hu-shoujijingfen-h5
Commit 0b38df8b by chenweisong
Options

1 doc文档路径访问方式改动，利用doc id访问文件 

2 pdfjs访问文件请求带上了Access-Token参数
parent ab0bc293
Showing with 638 additions and 604 deletions
src/views/app/pdf.vue
<template> <template>
<div> <div>
<pdf v-for="i in numPages" <pdf v-for="i in numPages"
:key="i" :key="i"
:src="src" :src="src"
:page="i" :page="i"
style="display: block; width: 100%"></pdf> style="display: block; width: 100%"></pdf>
</div> </div>
</template> </template>
<script> <script>
import { Indicator, Toast } from "mint-ui"; import {Indicator, Toast} from "mint-ui";
import pdf from 'vue-pdf' import pdf from 'vue-pdf'
export default { export default {
components: { components: {
pdf pdf
}, },
data() { data() {
return { return {
src: '', src: '',
numPages: undefined, numPages: undefined,
}
},
methods: {
async preview() {
Indicator.open()
let pdfSrc = this.$route.query.pdfSrc;
this.src = pdf.createLoadingTask({
url: pdfSrc,
httpHeaders: {
"Access-Token": this.$store.state.token
}
});
this.src.then(pdf => {
Indicator.close()
this.numPages = pdf.numPages;
}).catch(error => {
Toast("网络出错");
Indicator.close()
});
}
},
created() {
let title = this.$route.query.title
let index = title.lastIndexOf('.pdf')
// console.log('index :', index)
if (index !== -1) {
title = title.substr(0, index)
}
this.setTitle({title: title});
this.preview()
},
mounted() {
document.getElementById("viewport").setAttribute('content', 'user-scalable=yes, width=device-width, minimum-scale=0.5, initial-scale=1, maximum-scale=3');
},
beforeDestroy() {
document.getElementById("viewport").setAttribute('content', 'user-scalable=no, width=device-width, minimum-scale=1, initial-scale=1, maximum-scale=1');
},
} }
},
methods: {
async preview() {
Indicator.open()
let pdfSrc = this.$route.query.pdfSrc ? this.$route.query.pdfSrc : 'https://blog.koley.in/pdfvuer/nationStates.pdf'
this.src = pdf.createLoadingTask(pdfSrc);
this.src.then(pdf => {
Indicator.close()
this.numPages = pdf.numPages;
}).catch(error => {
Toast("网络出错");
Indicator.close()
});
}
},
created() {
let title = this.$route.query.title
let index = title.lastIndexOf('.pdf')
// console.log('index :', index)
if (index !== -1) {
title = title.substr(0, index)
}
this.setTitle({ title: title });
this.preview()
},
mounted() {
document.getElementById("viewport").setAttribute('content', 'user-scalable=yes, width=device-width, minimum-scale=0.5, initial-scale=1, maximum-scale=3');
},
beforeDestroy() {
document.getElementById("viewport").setAttribute('content', 'user-scalable=no, width=device-width, minimum-scale=1, initial-scale=1, maximum-scale=1');
},
}
</script> </script>
\ No newline at end of file
src/views/app/workbench.vue
<template> <template>
<div class="pages"> <div class="pages">
<div class="contennt"> <div class="contennt">
<div class="swipe"> <div class="swipe">
<mt-swipe @change="swipeChange" <mt-swipe @change="swipeChange"
:auto="4000" :auto="4000"
@touch="swipeClick" @touch="swipeClick"
:defaultIndex="defaultIndex"> :defaultIndex="defaultIndex">
<mt-swipe-item v-for="(i, index) in advertList" <mt-swipe-item v-for="(i, index) in advertList"
:key="index"> :key="index">
<img @click="swipeClick" <img @click="swipeClick"
class="swipe-img" class="swipe-img"
:src="i.imagePath" :src="i.imagePath"
alt=""> alt="">
</mt-swipe-item> </mt-swipe-item>
</mt-swipe> </mt-swipe>
</div> </div>
<div class="tab"> <div class="tab">
<div class="tab-header"> <div class="tab-header">
<div v-for="(d, i) in docDictList" <div v-for="(d, i) in docDictList"
:key="i" :key="i"
@click="changeTab(d.TYPE)" @click="changeTab(d.TYPE)"
class="tab-header-item"> class="tab-header-item">
<span :class="{active: currentDocType === d.TYPE}">{{d.NAME}}</span> <span :class="{active: currentDocType === d.TYPE}">{{d.NAME}}</span>
</div> </div>
</div> </div>
<div class="bg"></div> <div class="bg"></div>
<div class="tab-body"> <div class="tab-body">
<transition-group name="list" <transition-group name="list"
tag="p"> tag="p">
<div v-for="(l,i) in docList" <div v-for="(l,i) in docList"
:key="i" :key="i"
@click="openPdf(i)" @click="openPdf(i)"
class="tab-body-item list-item"> class="tab-body-item list-item">
<div class="mb20 tab-body-item-div"> <div class="mb20 tab-body-item-div">
<img class="icon fl ml20" <img class="icon fl ml20"
:src="l.imgUrl" /> :src="l.imgUrl"/>
<div class="name fl">{{ l.title }}</div> <div class="name fl">{{ l.title }}</div>
<span class="clearfix"></span> <span class="clearfix"></span>
</div> </div>
<div> <div>
<span class="date fl">{{ l.createdTime }}</span> <span class="date fl">{{ l.createdTime }}</span>
<span v-if="currentDocType === 2" <span v-if="currentDocType === 2"
class="area fr">{{ l.area }}</span> class="area fr">{{ l.area }}</span>
<span class="clearfix"></span> <span class="clearfix"></span>
</div> </div>
</div>
</transition-group>
<img v-if="imgActive === 1"
@click="changeDocList(1)"
class="more"
src="../../assets/app/workbench/show.png"
alt="更多">
<img v-if="imgActive === 2"
@click="changeDocList(2)"
class="less"
src="../../assets/app/workbench/hidden.jpg"
alt="隐藏">
</div>
</div>
<div class="bg"></div>
<div class="item">
<div class="item-header">我的应用</div>
<div class="item-body">
<div v-for="(l,i) in applicationList"
:key="i"
@click="applicationClick(l)"
class="item-body-item">
<img :src="l.icon"
alt="">
<div class="name">{{ l.name }}</div>
</div>
<span class="clearfix"></span>
</div>
</div> </div>
</transition-group>
<img v-if="imgActive === 1"
@click="changeDocList(1)"
class="more"
src="../../assets/app/workbench/show.png"
alt="更多">
<img v-if="imgActive === 2"
@click="changeDocList(2)"
class="less"
src="../../assets/app/workbench/hidden.jpg"
alt="隐藏">
</div>
</div>
<div class="bg"></div>
<div class="item">
<div class="item-header">我的应用</div>
<div class="item-body">
<div v-for="(l,i) in applicationList"
:key="i"
@click="applicationClick(l)"
class="item-body-item">
<img :src="l.icon"
alt="">
<div class="name">{{ l.name }}</div>
</div>
<span class="clearfix"></span>
</div> </div>
</div> <div class="bg"></div>
</div>
</div> </div>
<div class="bg"></div>
</div>
</div>
</template> </template>
<script > <script>
import { Swipe, SwipeItem } from 'mint-ui'; import {Swipe, SwipeItem} from 'mint-ui';
import { formatDateTime } from "libs/common/common"; import {formatDateTime} from "libs/common/common";
// 更多、隐藏 // 更多、隐藏
const MORE = 1 const MORE = 1
const LESS = 2 const LESS = 2
// // 资讯、专区、材料、报告 // // 资讯、专区、材料、报告
// const INFORMATION = 1 // const INFORMATION = 1
// const SPECIALAREA = 2 // const SPECIALAREA = 2
// const MATERIAL = 3 // const MATERIAL = 3
// const REPORT = 4 // const REPORT = 4
export default { export default {
components: { components: {
"mt-swipe": Swipe, "mt-swipe": Swipe,
"mt-swipe-item": SwipeItem, "mt-swipe-item": SwipeItem,
}, },
data() { data() {
return { return {
imgActive: MORE, imgActive: MORE,
defaultIndex: 0, defaultIndex: 0,
userInfo: { userInfo: {
account: this.$route.query.account, // "XUSHENG1", account: this.$route.query.account, // "XUSHENG1",
aid: this.$route.query.aid, // 18411, //地区id aid: this.$route.query.aid, // 18411, //地区id
areaId: this.$route.query.areaId, // 731, //地区id areaId: this.$route.query.areaId, // 731, //地区id
area: this.$route.query.area, // "A_长沙", 地区名 area: this.$route.query.area, // "A_长沙", 地区名
id: this.$route.query.id, // "OCxusheng1", 用户id id: this.$route.query.id, // "OCxusheng1", 用户id
level: parseInt(this.$route.query.level), // 等级 ，0 是省，1 是市，2 是区或者分公司 level: parseInt(this.$route.query.level), // 等级 ，0 是省，1 是市，2 是区或者分公司
phone: this.$route.query.phone, // "13873110056", phone: this.$route.query.phone, // "13873110056",
pid: this.$route.query.pid, // 0, 上级id pid: this.$route.query.pid, // 0, 上级id
username: this.$route.query.username, // "徐胜", 用户名 username: this.$route.query.username, // "徐胜", 用户名
}, },
advertList: [], advertList: [],
currentIndex: 0, currentIndex: 0,
docList: [ docList: [
// { // {
// id: 1, // id: 1,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// }, // },
// { // {
// id: 2, // id: 2,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// }, // },
// { // {
// id: 3, // id: 3,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// }, // },
// { // {
// id: 4, // id: 4,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// } // }
], ],
originList: [ originList: [
// { // {
// id: 1, // id: 1,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// }, // },
// { // {
// id: 2, // id: 2,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// }, // },
// { // {
// id: 3, // id: 3,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// }, // },
// { // {
// id: 4, // id: 4,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// }, // },
// { // {
// id: 5, // id: 5,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// }, // },
// { // {
// id: 6, // id: 6,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// }, // },
// { // {
// id: 7, // id: 7,
// name: '全省手机经分APP手机用情况通报.pdf', // name: '全省手机经分APP手机用情况通报.pdf',
// date: '2019/03/27', // date: '2019/03/27',
// area: '岳阳市', // area: '岳阳市',
// imgUrl: require("../../assets/app/workbench/pdf.png") // imgUrl: require("../../assets/app/workbench/pdf.png")
// }, // },
], ],
applicationList: [ applicationList: [
// { // {
// id: 1, // id: 1,
// name: 'APP使用情况', // name: 'APP使用情况',
// icon: require("../../assets/app/workbench/01.png") // icon: require("../../assets/app/workbench/01.png")
// }, // },
// { // {
// id: 2, // id: 2,
// name: '工单系统', // name: '工单系统',
// icon: require("../../assets/app/workbench/02.png") // icon: require("../../assets/app/workbench/02.png")
// }, // },
], ],
docDictList: [], docDictList: [],
currentDocType: 1, currentDocType: 1,
}; };
}, },
// mixins: [commonMixin], // mixins: [commonMixin],
methods: { methods: {
// 根据日月类型来获取时间 type ： 1 日 ， 2 月 // 根据日月类型来获取时间 type ： 1 日 ， 2 月
formatTime(date) { formatTime(date) {
let str = formatDateTime(new Date(date), "YYYY-MM-DD mm:ss").slice(0, 10); let str = formatDateTime(new Date(date), "YYYY-MM-DD mm:ss").slice(0, 10);
return str; return str;
}, },
changeDocList(active) { changeDocList(active) {
// console.log('active :', active) // console.log('active :', active)
if (active === MORE) { if (active === MORE) {
this.docList = [] this.docList = []
this.originList.forEach(l => { this.originList.forEach(l => {
this.docList.push(l) this.docList.push(l)
}); });
this.imgActive = LESS this.imgActive = LESS
} else if (active === LESS) { } else if (active === LESS) {
if (this.originList.length >= 4) { if (this.originList.length >= 4) {
this.docList.length = 4 this.docList.length = 4
} else { } else {
this.docList = this.originList this.docList = this.originList
} }
this.imgActive = MORE this.imgActive = MORE
} }
}, },
changeTab(type) { changeTab(type) {
this.currentDocType = type this.currentDocType = type
this.getDocSearch() this.getDocSearch()
}, },
swipeChange(index) { swipeChange(index) {
// console.log("index:", index) // console.log("index:", index)
this.currentIndex = index this.currentIndex = index
}, },
swipeClick() { swipeClick() {
let pdfSrc = this.advertList[this.currentIndex].filePath let pdfSrc = this.advertList[this.currentIndex].filePath
if (!pdfSrc) return if (!pdfSrc) return
let title = this.advertList[this.currentIndex].fileName let title = this.advertList[this.currentIndex].fileName
// console.log('swipeClick pdfSrc :', pdfSrc) // console.log('swipeClick pdfSrc :', pdfSrc)
const query = this.$route.query const query = this.$route.query
query.pdfSrc = pdfSrc query.pdfSrc = pdfSrc
query.title = title query.title = title
let href = window.location.href let href = window.location.href
let num = href.indexOf('#') let num = href.indexOf('#')
let newHref = href.slice(0, num) + '#/pdf?' let newHref = href.slice(0, num) + '#/pdf?'
for (let i in query) { for (let i in query) {
newHref += i + '=' + query[i] + '&'; newHref += i + '=' + query[i] + '&';
} }
// console.log('newHref :', newHref) // console.log('newHref :', newHref)
// return // return
if (query.ua === 'android') { if (query.ua === 'android') {
emm.openWebView(newHref) emm.openWebView(newHref)
} else if (query.ua === 'ios') { } else if (query.ua === 'ios') {
// openRaw // openRaw
window.webkit.messageHandlers.openWebView.postMessage(newHref); window.webkit.messageHandlers.openWebView.postMessage(newHref);
} else { } else {
this.$router.push({ path: `/pdf`, query }) this.$router.push({path: `/pdf`, query})
} }
}, },
applicationClick(applicationItem, url, index) { applicationClick(applicationItem, url, index) {
let href = applicationItem.pack + '?' let href = applicationItem.pack + '?'
const query = this.$route.query const query = this.$route.query
for (let i in query) { for (let i in query) {
href += i + '=' + query[i] + '&'; href += i + '=' + query[i] + '&';
} }
// 安卓与 ios 打开应用 // 安卓与 ios 打开应用
if (query.ua === 'android') { if (query.ua === 'android') {
emm.openApplication(JSON.stringify(applicationItem)) emm.openApplication(JSON.stringify(applicationItem))
} else if (query.ua === 'ios') { } else if (query.ua === 'ios') {
window.webkit.messageHandlers.openApplication.postMessage(applicationItem); window.webkit.messageHandlers.openApplication.postMessage(applicationItem);
} else { } else {
window.location.href = href window.location.href = href
} }
}, },
openPdf(index) { openPdf(index) {
let pdfSrc = this.docList[index].filePath let pdfSrc = this.docList[index].filePath
let title = this.docList[index].title let title = this.docList[index].title
const query = this.$route.query const query = this.$route.query
query.pdfSrc = pdfSrc query.pdfSrc = pdfSrc
query.title = title query.title = title
let href = window.location.href let href = window.location.href
let num = href.indexOf('#') let num = href.indexOf('#')
let newHref = href.slice(0, num) + '#/pdf?' let newHref = href.slice(0, num) + '#/pdf?'
for (let i in query) { for (let i in query) {
newHref += i + '=' + query[i] + '&'; newHref += i + '=' + query[i] + '&';
} }
console.log('newHref :', newHref) console.log('newHref :', newHref)
if (query.ua === 'android') { if (query.ua === 'android') {
emm.openWebView(newHref) emm.openWebView(newHref)
} else if (query.ua === 'ios') { } else if (query.ua === 'ios') {
window.webkit.messageHandlers.openWebView.postMessage(newHref); window.webkit.messageHandlers.openWebView.postMessage(newHref);
} else { } else {
this.$router.push({ path: `/pdf`, query }) this.$router.push({path: `/pdf`, query})
} }
}, },
async getApplicationList() { async getApplicationList() {
let dt = new FormData(); let dt = new FormData();
// platform // platform
// * Android 0 // * Android 0
// * iPhone 1 // * iPhone 1
// * iPad 2 // * iPad 2
// * HTML5 3 // * HTML5 3
dt.append("platform", 3); dt.append("platform", 3);
dt.append("level", 0); dt.append("level", 0);
const data = await this.post(this.$urls.findMyInstalled, dt, '网络错误', { const data = await this.post(this.$urls.findMyInstalled, dt, '网络错误', {
headers: { headers: {
xid: this.$route.query.xid xid: this.$route.query.xid
}
})
if (data === null) return
console.log('data :', data)
// this.applicationList = data.applications
this.applicationList = data
this.applicationList.forEach(e => {
// https://emm.cmccbigdata.com:8443/file/1530357218832.png
e.icon = "https://emm.cmccbigdata.com:8443/file/" + e.icon
});
},
async getAdvertList() {
const data = await this.get(this.$urls.advertList)
if (data === null) return
data.sort((a, b) => {
return a.pos - b.pos
})
// console.log('data advertList:', data)
for (let i = 0; i < data.length; i++) {
const d = data[i];
if (d.filePath) d.filePath = 'https://emm.cmccbigdata.com:8443/work/' + d.filePath
d.imagePath = 'https://emm.cmccbigdata.com:8443/work/' + d.imagePath
}
data.sort((a, b) => {
return a.pos - b.pos
})
this.advertList = data
},
async initDoc() {
await this.getDocGetDictList()
await this.getDocSearch()
},
async getDocGetDictList() {
const data = await this.get(this.$urls.docGetDictList, {})
// console.log('data docDictList:', data)
if (data === null) return
this.docDictList = data
},
async getDocSearch() {
this.originList = []
this.docList = []
const data = await this.get(this.$urls.docSearch, {
type: this.currentDocType
})
// console.log('data docSearch:', data)
if (data === null) return
for (let i = 0; i < data.length; i++) {
const doc = data[i];
doc.imgUrl = require("../../assets/app/workbench/pdf.png")
// doc.createdTime = this.formatTime(doc.createdTime)
doc.createdTime = doc.createdTime.slice(0, 10)
doc.filePath = 'https://emm.cmccbigdata.com:8443/mobile/download?id=' + doc.id
}
data.sort((a, b) => {
return b.id - a.id
})
this.originList = JSON.parse(JSON.stringify(data))
this.docList = data
this.imgActive = MORE
if (data.length >= 4) this.docList.length = 4
},
},
created() {
this.initDoc()
this.getAdvertList()
this.getApplicationList()
},
mounted() {
this.setTitle({title: "工作台"});
this.$store.commit('SAVE_USER', {
userInfo: this.userInfo
})
window.getApplicationList = this.getApplicationList
} }
}) };
if (data === null) return
console.log('data :', data)
// this.applicationList = data.applications
this.applicationList = data
this.applicationList.forEach(e => {
// https://emm.cmccbigdata.com:8443/file/1530357218832.png
e.icon = "https://emm.cmccbigdata.com:8443/file/" + e.icon
});
},
async getAdvertList() {
const data = await this.get(this.$urls.advertList)
if (data === null) return
data.sort((a, b) => {
return a.pos - b.pos
})
// console.log('data advertList:', data)
for (let i = 0; i < data.length; i++) {
const d = data[i];
if (d.filePath) d.filePath = 'https://emm.cmccbigdata.com:8443/work/' + d.filePath
d.imagePath = 'https://emm.cmccbigdata.com:8443/work/' + d.imagePath
}
data.sort((a, b) => {
return a.pos - b.pos
})
this.advertList = data
},
async initDoc() {
await this.getDocGetDictList()
await this.getDocSearch()
},
async getDocGetDictList() {
const data = await this.get(this.$urls.docGetDictList, {})
// console.log('data docDictList:', data)
if (data === null) return
this.docDictList = data
},
async getDocSearch() {
this.originList = []
this.docList = []
const data = await this.get(this.$urls.docSearch, {
type: this.currentDocType
})
// console.log('data docSearch:', data)
if (data === null) return
for (let i = 0; i < data.length; i++) {
const doc = data[i];
doc.imgUrl = require("../../assets/app/workbench/pdf.png")
// doc.createdTime = this.formatTime(doc.createdTime)
doc.createdTime = doc.createdTime.slice(0, 10)
doc.filePath = 'https://emm.cmccbigdata.com:8443/work/' + doc.filePath
}
data.sort((a, b) => {
return b.id - a.id
})
this.originList = JSON.parse(JSON.stringify(data))
this.docList = data
this.imgActive = MORE
if (data.length >= 4) this.docList.length = 4
},
},
created() {
this.initDoc()
this.getAdvertList()
this.getApplicationList()
},
mounted() {
this.setTitle({ title: "工作台" });
this.$store.commit('SAVE_USER', {
userInfo: this.userInfo
})
window.getApplicationList = this.getApplicationList
}
};
</script> </script>
<style lang="less"> <style lang="less">
.pages { .pages {
.mint-swipe-indicator { .mint-swipe-indicator {
width: 0.2rem; width: 0.2rem;
height: 0.04rem; height: 0.04rem;
opacity: 0.5; opacity: 0.5;
background-color: #ffffff; background-color: #ffffff;
}
.mint-swipe-indicator.is-active {
opacity: 1;
background-color: #fff;
}
}
</style>
<style lang="less" scoped>
.list-item {
// display: inline-block;
margin-right: 10px;
}
.list-enter-active {
transition: all 1s;
}
.list-leave-active {
transition: all 0.5s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
.pages {
font-family: "PingFang SC";
color: #333333;
font-size: 0.28rem;
.contennt {
.tab {
.tab-header {
display: flex;
height: 0.8rem;
overflow: scroll;
.tab-header-item {
color: #999999;
flex: 1;
font-size: 0.28rem;
text-align: center;
min-width: 1.5rem;
span {
font-weight: Medium;
position: relative;
display: inline-block;
line-height: 0.8rem;
}
span.active {
font-weight: bold;
color: #2a82c3;
&:after {
content: "";
width: 100%;
left: 0;
bottom: 0;
position: absolute;
border-bottom: 2px solid #2a82c3;
}
}
}
}
.tab-body {
position: relative;
min-height: 1rem;
padding-top: 0.1rem;
padding-bottom: 0.5rem;
.more,
.less {
position: absolute;
bottom: 0.1rem;
left: 3.55rem;
width: 0.35rem;
} }
p {
margin: 0; .mint-swipe-indicator.is-active {
} opacity: 1;
// .more { background-color: #fff;
// position: absolute;
// bottom: .1rem;
// left: 3.8rem;
// width: 0.22rem;
// }
.tab-body-item {
// width: 100%;
color: #999999;
font-size: 0.24rem;
// height: 1rem;
// padding-top: 0.1rem;
// line-height: 0.9rem;
padding: 0.15rem 0;
border-bottom: 1px solid #eee;
.tab-body-item-div {
position: relative;
padding-left: 0.6rem;
}
.name {
font-weight: normal;
font-size: 0.24rem;
color: #333;
}
.area,
.date {
font-size: 0.2rem;
color: #999999;
}
.area {
margin-right: 0.3rem;
}
.date {
margin-left: 0.3rem;
}
&:last-of-type {
border-bottom: 0px solid #eee;
}
.icon {
position: absolute;
left: 0;
width: 0.21rem;
margin-right: 0.1rem;
margin-left: 0.3rem;
}
} }
}
} }
.swipe { </style>
height: 3rem; <style lang="less" scoped>
// width: 100%; .list-item {
padding: 0.16rem 0.26rem; // display: inline-block;
background-color: #eeeeee; margin-right: 10px;
.swipe-img { }
width: 100%;
height: 100%; .list-enter-active {
border-radius: 0.12rem; transition: all 1s;
} }
.list-leave-active {
transition: all 0.5s;
} }
.item {
min-height: 3rem; .list-enter, .list-leave-to
text-align: center; /* .list-leave-active for below version 2.1.8 */ {
.item-header { opacity: 0;
color: #000; transform: translateY(30px);
font-size: 0.3rem; }
font-weight: bold;
height: 0.8rem; .pages {
line-height: 0.8rem; font-family: "PingFang SC";
border-bottom: 1px solid #eee; color: #333333;
} font-size: 0.28rem;
.item-body {
padding-bottom: 0.2rem; .contennt {
.item-body-item { .tab {
float: left; .tab-header {
padding-top: 0.4rem; display: flex;
height: 1.48rem; height: 0.8rem;
width: 1.875rem; overflow: scroll;
img {
width: 0.68rem; .tab-header-item {
height: 0.72rem; color: #999999;
} flex: 1;
.name { font-size: 0.28rem;
margin-top: 0.12rem; text-align: center;
} min-width: 1.5rem;
span {
font-weight: Medium;
position: relative;
display: inline-block;
line-height: 0.8rem;
}
span.active {
font-weight: bold;
color: #2a82c3;
&:after {
content: "";
width: 100%;
left: 0;
bottom: 0;
position: absolute;
border-bottom: 2px solid #2a82c3;
}
}
}
}
.tab-body {
position: relative;
min-height: 1rem;
padding-top: 0.1rem;
padding-bottom: 0.5rem;
.more,
.less {
position: absolute;
bottom: 0.1rem;
left: 3.55rem;
width: 0.35rem;
}
p {
margin: 0;
}
// .more {
// position: absolute;
// bottom: .1rem;
// left: 3.8rem;
// width: 0.22rem;
// }
.tab-body-item {
// width: 100%;
color: #999999;
font-size: 0.24rem;
// height: 1rem;
// padding-top: 0.1rem;
// line-height: 0.9rem;
padding: 0.15rem 0;
border-bottom: 1px solid #eee;
.tab-body-item-div {
position: relative;
padding-left: 0.6rem;
}
.name {
font-weight: normal;
font-size: 0.24rem;
color: #333;
}
.area,
.date {
font-size: 0.2rem;
color: #999999;
}
.area {
margin-right: 0.3rem;
}
.date {
margin-left: 0.3rem;
}
&:last-of-type {
border-bottom: 0px solid #eee;
}
.icon {
position: absolute;
left: 0;
width: 0.21rem;
margin-right: 0.1rem;
margin-left: 0.3rem;
}
}
}
}
.swipe {
height: 3rem;
// width: 100%;
padding: 0.16rem 0.26rem;
background-color: #eeeeee;
.swipe-img {
width: 100%;
height: 100%;
border-radius: 0.12rem;
}
}
.item {
min-height: 3rem;
text-align: center;
.item-header {
color: #000;
font-size: 0.3rem;
font-weight: bold;
height: 0.8rem;
line-height: 0.8rem;
border-bottom: 1px solid #eee;
}
.item-body {
padding-bottom: 0.2rem;
.item-body-item {
float: left;
padding-top: 0.4rem;
height: 1.48rem;
width: 1.875rem;
img {
width: 0.68rem;
height: 0.72rem;
}
.name {
margin-top: 0.12rem;
}
}
}
}
} }
}
} }
}
} .bg {
.bg { height: 0.12rem;
height: 0.12rem; background-color: #eeeeee;
background-color: #eeeeee; }
}
</style> </style>
\ No newline at end of file
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 to comment