xiugai
This commit is contained in:
parent
6bf4f315e6
commit
94e54f4815
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# 忽略 node_modules 文件夹及其内容
|
||||||
|
/node_modules/
|
||||||
13
.tea/entryFiles-development/config$.js
Normal file
13
.tea/entryFiles-development/config$.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
const g = typeof global !== 'undefined' ? global : self;
|
||||||
|
g.appXAppJson = {
|
||||||
|
"app": {
|
||||||
|
"$homepage": "pages/index/index",
|
||||||
|
"plugins": {
|
||||||
|
"myPlugin": {
|
||||||
|
"version": "*",
|
||||||
|
"provider": "3000000091373235"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
4
.tea/entryFiles-development/importScripts$.js
Normal file
4
.tea/entryFiles-development/importScripts$.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
if(!self.Map || !self.Set || !self.Symbol) {
|
||||||
|
importScripts('https://gw.alipayobjects.com/as/g/appx_release/deps/1.0.3/es6-set-map-symbol.js');
|
||||||
|
}
|
||||||
|
|
||||||
30
.tea/entryFiles-development/index$.web.js
Normal file
30
.tea/entryFiles-development/index$.web.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
require('@alipay/appx-compiler/lib/sjsEnvInit');
|
||||||
|
require('./config$');
|
||||||
|
require('../../app');
|
||||||
|
require('../../node_modules/mini-antui/es/am-icon/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../components/myEmpty/myEmpty?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../components/pursueItem/pursueItem?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../components/myFooter/myFooter?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/list/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/list/list-item/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/popup/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/flex/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/flex/flex-item/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../components/myPay/myPay?hash=95d4e6a1d744881766987015bf4637f54936e766');
|
||||||
|
require('../../node_modules/mini-antui/es/search-bar/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/modal/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/badge/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/tabs/index?hash=b998354db5b64281090d8969355b2b3db41cda49');
|
||||||
|
require('../../node_modules/mini-antui/es/tabs/tab-content/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../pages/index/index?hash=4c436b8802cde3a53b8da3fd201d0c5d124d1427');
|
||||||
|
require('../../pages/discover/discover?hash=c38b953af6bdab8fe399141b33dd1ad1ceb7ea7f');
|
||||||
|
require('../../pages/binge/binge?hash=6164953b5a1ef04f4f4f6e6561b545255541aa0c');
|
||||||
|
require('../../pages/my/my?hash=75b5b8f1ecfabe3e2ac25d83ad8d5dac4aa47c98');
|
||||||
|
require('../../pages/search/search?hash=aba215d007624a3ae18a69066f7987a8463d4c8c');
|
||||||
|
require('../../pages/history/history?hash=496b52f9f456db6a9f22580be95fd2756db9e17d');
|
||||||
|
require('../../pages/transaction/transaction?hash=496b52f9f456db6a9f22580be95fd2756db9e17d');
|
||||||
|
require('../../pages/give/give?hash=496b52f9f456db6a9f22580be95fd2756db9e17d');
|
||||||
|
require('../../pages/purchaseNotes/purchaseNotes?hash=c38b953af6bdab8fe399141b33dd1ad1ceb7ea7f');
|
||||||
|
require('../../pages/video/video?hash=ab3ed3fe15953ba710981e31c5a541336f6b549b');
|
||||||
|
require('../../pages/recharge/recharge?hash=c38b953af6bdab8fe399141b33dd1ad1ceb7ea7f');
|
||||||
|
require('../../pages/videoAndroid/videoAndroid?hash=ab3ed3fe15953ba710981e31c5a541336f6b549b');
|
||||||
67
.tea/entryFiles-development/index$.worker.js
Normal file
67
.tea/entryFiles-development/index$.worker.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
if(!self.__appxInited) {
|
||||||
|
self.__appxInited = 1;
|
||||||
|
require('@alipay/appx-compiler/lib/sjsEnvInit');
|
||||||
|
|
||||||
|
require('./config$');
|
||||||
|
|
||||||
|
|
||||||
|
function getUserAgentInPlatformWeb() {
|
||||||
|
return typeof navigator !== 'undefined' ? navigator.swuserAgent || navigator.userAgent || '' : '';
|
||||||
|
}
|
||||||
|
if(getUserAgentInPlatformWeb() && (getUserAgentInPlatformWeb().indexOf('LyraVM') > 0 || getUserAgentInPlatformWeb().indexOf('AlipayIDE') > 0) ) {
|
||||||
|
var AFAppX = self.AFAppX.getAppContext ? self.AFAppX.getAppContext().AFAppX : self.AFAppX;
|
||||||
|
} else {
|
||||||
|
importScripts('https://appx/af-appx.worker.min.js');
|
||||||
|
var AFAppX = self.AFAppX;
|
||||||
|
}
|
||||||
|
self.getCurrentPages = AFAppX.getCurrentPages;
|
||||||
|
self.getApp = AFAppX.getApp;
|
||||||
|
self.Page = AFAppX.Page;
|
||||||
|
self.App = AFAppX.App;
|
||||||
|
self.my = AFAppX.bridge || AFAppX.abridge;
|
||||||
|
self.abridge = self.my;
|
||||||
|
self.Component = AFAppX.WorkerComponent || function(){};
|
||||||
|
self.$global = AFAppX.$global;
|
||||||
|
self.requirePlugin = AFAppX.requirePlugin;
|
||||||
|
|
||||||
|
|
||||||
|
if(AFAppX.registerApp) {
|
||||||
|
AFAppX.registerApp({
|
||||||
|
appJSON: appXAppJson,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if(AFAppX.compilerConfig){ AFAppX.compilerConfig.component2 = true; }
|
||||||
|
|
||||||
|
function success() {
|
||||||
|
require('../../app');
|
||||||
|
require('../../node_modules/mini-antui/es/am-icon/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../components/myEmpty/myEmpty?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../components/pursueItem/pursueItem?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../components/myFooter/myFooter?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/list/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/list/list-item/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/popup/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/flex/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/flex/flex-item/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../components/myPay/myPay?hash=95d4e6a1d744881766987015bf4637f54936e766');
|
||||||
|
require('../../node_modules/mini-antui/es/search-bar/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/modal/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/badge/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../node_modules/mini-antui/es/tabs/index?hash=b998354db5b64281090d8969355b2b3db41cda49');
|
||||||
|
require('../../node_modules/mini-antui/es/tabs/tab-content/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
|
||||||
|
require('../../pages/index/index?hash=4c436b8802cde3a53b8da3fd201d0c5d124d1427');
|
||||||
|
require('../../pages/discover/discover?hash=c38b953af6bdab8fe399141b33dd1ad1ceb7ea7f');
|
||||||
|
require('../../pages/binge/binge?hash=6164953b5a1ef04f4f4f6e6561b545255541aa0c');
|
||||||
|
require('../../pages/my/my?hash=75b5b8f1ecfabe3e2ac25d83ad8d5dac4aa47c98');
|
||||||
|
require('../../pages/search/search?hash=aba215d007624a3ae18a69066f7987a8463d4c8c');
|
||||||
|
require('../../pages/history/history?hash=496b52f9f456db6a9f22580be95fd2756db9e17d');
|
||||||
|
require('../../pages/transaction/transaction?hash=496b52f9f456db6a9f22580be95fd2756db9e17d');
|
||||||
|
require('../../pages/give/give?hash=496b52f9f456db6a9f22580be95fd2756db9e17d');
|
||||||
|
require('../../pages/purchaseNotes/purchaseNotes?hash=c38b953af6bdab8fe399141b33dd1ad1ceb7ea7f');
|
||||||
|
require('../../pages/video/video?hash=ab3ed3fe15953ba710981e31c5a541336f6b549b');
|
||||||
|
require('../../pages/recharge/recharge?hash=c38b953af6bdab8fe399141b33dd1ad1ceb7ea7f');
|
||||||
|
require('../../pages/videoAndroid/videoAndroid?hash=ab3ed3fe15953ba710981e31c5a541336f6b549b');
|
||||||
|
}
|
||||||
|
self.bootstrapApp ? self.bootstrapApp({ success }) : success();
|
||||||
|
}
|
||||||
@ -27,3 +27,4 @@ require('../../pages/give/give?hash=496b52f9f456db6a9f22580be95fd2756db9e17d');
|
|||||||
require('../../pages/purchaseNotes/purchaseNotes?hash=c38b953af6bdab8fe399141b33dd1ad1ceb7ea7f');
|
require('../../pages/purchaseNotes/purchaseNotes?hash=c38b953af6bdab8fe399141b33dd1ad1ceb7ea7f');
|
||||||
require('../../pages/video/video?hash=ab3ed3fe15953ba710981e31c5a541336f6b549b');
|
require('../../pages/video/video?hash=ab3ed3fe15953ba710981e31c5a541336f6b549b');
|
||||||
require('../../pages/recharge/recharge?hash=c38b953af6bdab8fe399141b33dd1ad1ceb7ea7f');
|
require('../../pages/recharge/recharge?hash=c38b953af6bdab8fe399141b33dd1ad1ceb7ea7f');
|
||||||
|
require('../../pages/videoAndroid/videoAndroid?hash=ab3ed3fe15953ba710981e31c5a541336f6b549b');
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
3
app.json
3
app.json
@ -10,7 +10,8 @@
|
|||||||
"pages/give/give",
|
"pages/give/give",
|
||||||
"pages/purchaseNotes/purchaseNotes",
|
"pages/purchaseNotes/purchaseNotes",
|
||||||
"pages/video/video",
|
"pages/video/video",
|
||||||
"pages/recharge/recharge"
|
"pages/recharge/recharge",
|
||||||
|
"pages/videoAndroid/videoAndroid"
|
||||||
],
|
],
|
||||||
"plugins": {
|
"plugins": {
|
||||||
"myPlugin": {
|
"myPlugin": {
|
||||||
|
|||||||
@ -11,6 +11,9 @@ Page({
|
|||||||
likelistFlag: false,
|
likelistFlag: false,
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
|
this.setData({
|
||||||
|
systemInfo: getApp().globalData.systemInfo
|
||||||
|
})
|
||||||
this.isGetList();
|
this.isGetList();
|
||||||
},
|
},
|
||||||
isGetList() {
|
isGetList() {
|
||||||
@ -84,12 +87,20 @@ Page({
|
|||||||
toPathVideo(event) {
|
toPathVideo(event) {
|
||||||
const data = event.target.dataset.item;
|
const data = event.target.dataset.item;
|
||||||
const isEdit = this.data.isEdit;
|
const isEdit = this.data.isEdit;
|
||||||
|
const systemInfo = this.data.systemInfo;
|
||||||
if (isEdit) {
|
if (isEdit) {
|
||||||
this.onDelItem(data);
|
this.onDelItem(data);
|
||||||
} else {
|
} else {
|
||||||
my.navigateTo({
|
if (systemInfo.platform == 'android') {
|
||||||
url: `/pages/video/video?sid=${data.bookid || data.id}`
|
my.navigateTo({
|
||||||
});
|
url: `/pages/videoAndroid/videoAndroid?sid=${data.id}`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
my.navigateTo({
|
||||||
|
url: `/pages/video/video?sid=${data.id}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|||||||
@ -3,7 +3,8 @@ const { httpRequest } = getApp();
|
|||||||
Page({
|
Page({
|
||||||
data: {
|
data: {
|
||||||
historyList: [],
|
historyList: [],
|
||||||
listFlag: false
|
listFlag: false,
|
||||||
|
systemInfo: {}
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
my.showLoading({
|
my.showLoading({
|
||||||
@ -18,7 +19,8 @@ Page({
|
|||||||
if (res.status == 1 && Array.isArray(res.data)) {
|
if (res.status == 1 && Array.isArray(res.data)) {
|
||||||
this.setData({
|
this.setData({
|
||||||
historyList: res.data,
|
historyList: res.data,
|
||||||
listFlag: true
|
listFlag: true,
|
||||||
|
systemInfo: getApp().globalData.systemInfo
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -26,8 +28,16 @@ Page({
|
|||||||
},
|
},
|
||||||
toGetVideo(event) {
|
toGetVideo(event) {
|
||||||
const data = event.target.dataset.item;
|
const data = event.target.dataset.item;
|
||||||
my.navigateTo({
|
const systemInfo = this.data.systemInfo;
|
||||||
url: `/pages/video/video?sid=${data.sid}&id=${data.chapterid || ""}`,
|
if (systemInfo.platform == 'android') {
|
||||||
});
|
my.navigateTo({
|
||||||
|
url: `/pages/videoAndroid/videoAndroid?sid=${data.sid}&id=${data.chapterid || ""}`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
my.navigateTo({
|
||||||
|
url: `/pages/video/video?sid=${data.sid}&id=${data.chapterid || ""}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -10,9 +10,13 @@ Page({
|
|||||||
module1: [],
|
module1: [],
|
||||||
module2: [],
|
module2: [],
|
||||||
module3: [],
|
module3: [],
|
||||||
}
|
},
|
||||||
|
systemInfo: {}
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
|
this.setData({
|
||||||
|
systemInfo: getApp().globalData.systemInfo
|
||||||
|
})
|
||||||
// 页面显示
|
// 页面显示
|
||||||
this.isGetList();
|
this.isGetList();
|
||||||
},
|
},
|
||||||
@ -69,10 +73,19 @@ Page({
|
|||||||
},
|
},
|
||||||
|
|
||||||
navgetHistory() {
|
navgetHistory() {
|
||||||
my.navigateTo({
|
const systemInfo = this.data.systemInfo;
|
||||||
url: `/pages/video/video?sid=${this.history.sid}&id=${this.history.id || ""
|
if (systemInfo.platform == 'android') {
|
||||||
}`,
|
my.navigateTo({
|
||||||
});
|
url: `/pages/videoAndroid/videoAndroid?sid=${this.history.sid}&id=${this.history.id || ""
|
||||||
|
}`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
my.navigateTo({
|
||||||
|
url: `/pages/video/video?sid=${this.history.sid}&id=${this.history.id || ""
|
||||||
|
}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getSearch() {
|
getSearch() {
|
||||||
@ -83,10 +96,17 @@ Page({
|
|||||||
|
|
||||||
toPathVideo(event) {
|
toPathVideo(event) {
|
||||||
const data = event.target.dataset.item;
|
const data = event.target.dataset.item;
|
||||||
console.log(data, "datadata")
|
|
||||||
my.navigateTo({
|
const systemInfo = this.data.systemInfo;
|
||||||
url: `/pages/video/video?sid=${data.id}`
|
if (systemInfo.platform == 'android') {
|
||||||
});
|
my.navigateTo({
|
||||||
|
url: `/pages/videoAndroid/videoAndroid?sid=${data.id}`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
my.navigateTo({
|
||||||
|
url: `/pages/video/video?sid=${data.id}`
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onHide() {
|
onHide() {
|
||||||
|
|||||||
400
pages/videoAndroid/videoAndroid.acss
Normal file
400
pages/videoAndroid/videoAndroid.acss
Normal file
@ -0,0 +1,400 @@
|
|||||||
|
page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color:#000;
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_html{
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_box {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_swiper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper_item {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper_item_warp {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_pay_warp {
|
||||||
|
flex: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper_video_box{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
/* pointer-events:none; */
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper_video_box_android {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events:none;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_pay_bg_cover {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_pay_bg_cover_img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
._swiper_video_cover {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 180rpx;
|
||||||
|
right: 30rpx;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
._chasing_dramas_cover {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
._chasing_dramas_text {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper_pay_modal {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 3;
|
||||||
|
background-color: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw_pay_mo_order {
|
||||||
|
font-size: 46rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw_pay_isAutoplay_tips {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
background-color: transparent;
|
||||||
|
font-size: 46rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw_pay_isAutoplay_tips_support {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
background-color: transparent;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw_pay_isAutoplay_btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 350rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 1;
|
||||||
|
background-color: #FF2B2B;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw_pay_isAutoplay_btn >text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_series {
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_series_box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 140rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_series_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_series_right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
._video_series_right_text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #fff;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
._vi_ser_le_img {
|
||||||
|
width: 88rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
._vi_ser_le_order {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #fff;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 加入追剧 */
|
||||||
|
/* ._chasing_dramas_modal {
|
||||||
|
|
||||||
|
} */
|
||||||
|
|
||||||
|
._chasing_dramas_mo_header {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
._ch_dr_mp_he_title >text {
|
||||||
|
font-size: 34rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
._ch_dr_mp_he_content >text {
|
||||||
|
color: #7F7F7F;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
._ch_dr_mp_footer {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
._ch_mo_footer_close,
|
||||||
|
._ch_mo_footer_submit {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
._ch_mo_footer_close> text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #e24848;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
._ch_mo_footer_submit {
|
||||||
|
background-color: #e24848;
|
||||||
|
}
|
||||||
|
|
||||||
|
._ch_mo_footer_submit >text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
._popup_order_content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 740rpx;
|
||||||
|
background: linear-gradient(180deg, #ffe2e2 0%, #ffffff 50%);
|
||||||
|
border-radius: 24rpx 24rpx 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_order_con_header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 100rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_order_con_tabs {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_ord_hea_left {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_ord_hea_le_title {
|
||||||
|
max-width: 360rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_ord_hea_le_title >text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 700;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_ord_hea_le_all{
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_ord_hea_le_all>text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
._video_html .am-popup {
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
/* ._pop_order_con_tabs {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* ._pop_order_con_warp {
|
||||||
|
padding-left:30rpx ;
|
||||||
|
} */
|
||||||
|
._pop_order__tabs .am-tabs-bar-tab {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_order__tabs .am-tabs-pane-wrap {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_order__tabs .am-tabs-bar-tab,
|
||||||
|
._pop_order__tabs .am-tabs-bar{
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_order__tabs .am-tabs-scroll-right{
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
._pop_order__tabs .am-tabs-scroll-left{
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_order__tabs .am-tabs-content-wrap {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
._pop_order__tabs .tab_c_list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 30rpx 10rpx 0 30rpx ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab_c_list_ul {
|
||||||
|
width: 16.66%;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab_c_list_ul_li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #e1e1e1;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab_c_list_ul_li.active {
|
||||||
|
background-color: #ff779e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab_c_list_ul_li.active text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab_c_list_ul_li text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab_c__ul_li_lock {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-color: #B5C0C7;
|
||||||
|
border-radius: 0 8rpx 0 8rpx ;
|
||||||
|
}
|
||||||
|
|
||||||
|
._li_lock_image {
|
||||||
|
display: block;
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
}
|
||||||
143
pages/videoAndroid/videoAndroid.axml
Normal file
143
pages/videoAndroid/videoAndroid.axml
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
<view class="_video_html">
|
||||||
|
<view class="_video_box" id="_video_box">
|
||||||
|
<swiper class="_video_swiper" duration={{200}} vertical={{true}} current={{swiperCurrent}} onChange="handelswiperCurrent"
|
||||||
|
disable-touch={{false}}>
|
||||||
|
<block a:for={{batchAllList}}>
|
||||||
|
<swiper-item key="swiper_item_{{index}}" class="swiper_item">
|
||||||
|
<view class="swiper_item_warp">
|
||||||
|
<!-- 播放 -->
|
||||||
|
<view class="_video_pay_warp">
|
||||||
|
<!--<view class="swiper_item" style="background:pink"></view> -->
|
||||||
|
<!--<block a:if={{videoInfoObj.chackpay == 1 && swiperOrder == item.order}}> -->
|
||||||
|
<block a:if={{videoInfoObj.chackpay == 1}}>
|
||||||
|
<block a:if={{videoInfoObj.order == item.order}}>
|
||||||
|
<video class="swiper_video_box" src={{videoInfoObj.video_url}} autoplay={{(videoInfoObj.chackpay == 1 && videoInfoObj.order == item.order && pageHideFlag) ? true: false }}
|
||||||
|
poster={{posterCover}} onError="videoErrorFn" objectFit="contain" show-mute-btn={{false}} onEnded="videoEndedFn"
|
||||||
|
></video>
|
||||||
|
<!-- onTimeUpdate="onTimeUpdate" controls={{false}} -->
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<block a:else>
|
||||||
|
<view class="_video_pay_bg_cover">
|
||||||
|
<image mode="scaleToFill" src={{posterCover}} class="_video_pay_bg_cover_img" />
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<!--<block a:elif={{ item.isvip == 1}}> -->
|
||||||
|
<!--<block a:if={{(iosPayment.status === 2 || systemInfo.platform != 'ios') && videoInfoObj.isvip == 1}}> -->
|
||||||
|
<block a:if={{ videoInfoObj.chackpay == 2 && item.isvip == 1}}>
|
||||||
|
<view class="_video_pay_bg_cover">
|
||||||
|
<image mode="scaleToFill" src={{posterCover}} class="_video_pay_bg_cover_img" />
|
||||||
|
</view>
|
||||||
|
<!--<cover-view class="swiper_pay_modal" onTap="toPathPlayPage"><cover-view class="sw_pay_mo_order">第 {{videoInfoObj.order}} 集</cover-view><cover-view class="sw_pay_isAutoplay_tips">此剧为付费内容，您的K币不足</cover-view><cover-view class="sw_pay_isAutoplay_tips_support">支持创作作者，解锁后继续观看</cover-view><cover-view class="sw_pay_isAutoplay_btn" onTap="toPathPlayPage">立即充值</cover-view></cover-view> -->
|
||||||
|
<view class="swiper_pay_modal">
|
||||||
|
<view class="sw_pay_mo_order">第 {{videoInfoObj.order}} 集</view>
|
||||||
|
<view class="sw_pay_isAutoplay_tips">此剧为付费内容，您的K币不足</view>
|
||||||
|
<view class="sw_pay_isAutoplay_tips_support">支持创作作者，解锁后继续观看</view>
|
||||||
|
<view class="sw_pay_isAutoplay_btn" onTap="toPathPlayPage">立即充值</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<block a:if={{ videoInfoObj.chackpay == 3 && item.isvip == 1}}>
|
||||||
|
<view class="_video_pay_bg_cover">
|
||||||
|
<image mode="scaleToFill" src={{posterCover}} class="_video_pay_bg_cover_img" />
|
||||||
|
</view>
|
||||||
|
<!--<cover-view class="swiper_pay_modal"><cover-view class="sw_pay_isAutoplay_tips">此剧为付费内容，需要购全集</cover-view><cover-view class="sw_pay_isAutoplay_tips_support">支持创作作者，解锁后继续观看</cover-view><cover-view class="sw_pay_isAutoplay_btn" onTap="toPathPlayAllOrder">立即购买 ( {{videoInfoObj.allprice}}K币 )</cover-view></cover-view> -->
|
||||||
|
<view class="swiper_pay_modal">
|
||||||
|
<view class="sw_pay_isAutoplay_tips">此剧为付费内容，需要购全集</view>
|
||||||
|
<view class="sw_pay_isAutoplay_tips_support">支持创作作者，解锁后继续观看</view>
|
||||||
|
<view class="sw_pay_isAutoplay_btn" onTap="toPathPlayAllOrder">立即购买 ( {{videoInfoObj.allprice}}K币 )</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<!--</block> -->
|
||||||
|
|
||||||
|
<block a:if={{videoInfoObj.chackpay == 1 && item.isvip == 0}}>
|
||||||
|
<!--<cover-view class="_swiper_video_cover"><cover-view class="_chasing_dramas_cover" onTap="addChasingDramasFn"><am-icon type="heart" size="{{30}}" color="{{videoInfoObj.iskeep === 0 ? '#ffffff' :'#FF2B2B'}}" /><cover-view class="_chasing_dramas_text">追剧</cover-view></cover-view></cover-view> -->
|
||||||
|
<view class="_swiper_video_cover">
|
||||||
|
<view class="_chasing_dramas_cover" onTap="addChasingDramasFn">
|
||||||
|
<am-icon type="heart" size="{{30}}" color="{{videoInfoObj.iskeep === 0 ? '#ffffff' :'#FF2B2B'}}" />
|
||||||
|
<view class="_chasing_dramas_text">追剧</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<block a:if={{swiperOrder}}>
|
||||||
|
<view class="_video_series" onTap="selectEpisodesFn">
|
||||||
|
<view class="_video_series_box">
|
||||||
|
<view class="_video_series_left">
|
||||||
|
<view class="_vi_ser_le_img">
|
||||||
|
<image mode="scaleToFill" src="{{imageBasUrl}}/iamge/video-bottom.png" class="_is_image" />
|
||||||
|
</view>
|
||||||
|
<view class="_vi_ser_le_order">
|
||||||
|
<!--<text>第 {{videoInfoObj.order}} 集</text> -->
|
||||||
|
<text>第 {{item.order}} 集</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="_video_series_right">
|
||||||
|
<view class="_video_series_right_text">
|
||||||
|
选集
|
||||||
|
</view>
|
||||||
|
<am-icon type="arrow-right" size="{{18}}" color="#fff" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
</view >
|
||||||
|
</swiper-item>
|
||||||
|
</block>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<popup show="{{orderPopupShow}}" position="bottom" onClose="closeOrderPopup">
|
||||||
|
<view class="_popup_order_content">
|
||||||
|
<view class="_pop_order_con_header">
|
||||||
|
<view class="_pop_ord_hea_left">
|
||||||
|
<view class="_pop_ord_hea_le_title">
|
||||||
|
<text>{{videoInfoObj.title}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="_pop_ord_hea_le_all">
|
||||||
|
<text>全{{videoInfoObj.total}}集</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="_pop_ord_hea_right" onTap="closeOrderPopup">
|
||||||
|
<am-icon type="cross" size="{{18}}" color="#333" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="_pop_order_con_tabs">
|
||||||
|
<tabs tabs={{orderList}} onTabClick="handleTabClick" activeTab="{{activeTab}} " className="_pop_order__tabs" tabBarActiveTextColor="#ff779e"
|
||||||
|
tabBarInactiveTextColor="#333" tabBarUnderlineColor="#ff779e">
|
||||||
|
|
||||||
|
<block a:for={{orderList}}>
|
||||||
|
<tab-content key={{index}}>
|
||||||
|
<view class="tab_c_list">
|
||||||
|
<block a:for="{{item.temp}}" a:for-index="idx" a:for-item="j">
|
||||||
|
<view class="tab_c_list_ul" key={{j.order}}>
|
||||||
|
<view class="tab_c_list_ul_li {{j.id == videoInfoObj.id ? 'active' :'' }}" data-item={{j}} onTap="handleOrderCurrent">
|
||||||
|
<text>{{j.order}}</text>
|
||||||
|
<block a:if={{j.isvip == 1}}>
|
||||||
|
<view class="tab_c__ul_li_lock">
|
||||||
|
<image mode="scaleToFill" src="{{imageBasUrl}}/iamge/videoLock.png" class="_li_lock_image" />
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</tab-content>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
</tabs>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</popup>
|
||||||
|
|
||||||
|
<view>
|
||||||
|
<my-pay popupShow="{{popupShow}}" onClosePopup="onClosePopup" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
471
pages/videoAndroid/videoAndroid.js
Normal file
471
pages/videoAndroid/videoAndroid.js
Normal file
@ -0,0 +1,471 @@
|
|||||||
|
import { imageBasUrl } from '../../utils/config'
|
||||||
|
const { httpRequest } = getApp();
|
||||||
|
// import { throttle } from 'lodash';
|
||||||
|
// import { throttle } from '../../utils/throttle'
|
||||||
|
var _ = require('underscore');
|
||||||
|
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
imageBasUrl,
|
||||||
|
// swiperItemHeight: 0,
|
||||||
|
orderList: [],
|
||||||
|
videoInfoObj: {},
|
||||||
|
posterCover: '',
|
||||||
|
activeTab: 0,
|
||||||
|
orderPopupShow: false,
|
||||||
|
systemInfo: {},
|
||||||
|
userInfo: {},
|
||||||
|
iosPayment: {},
|
||||||
|
swiperList: [],
|
||||||
|
swiperCurrent: 0,
|
||||||
|
changeCuurent: 0,
|
||||||
|
swiperOrder: 0,
|
||||||
|
sid: '',
|
||||||
|
popupShow: false,
|
||||||
|
batchAllOrder: 0,
|
||||||
|
batchAllList: [],
|
||||||
|
isThrottle: null,
|
||||||
|
pageHideFlag: true
|
||||||
|
},
|
||||||
|
// 获取其它信息
|
||||||
|
isOtherFn() {
|
||||||
|
// my.createSelectorQuery().select('#_video_box').boundingClientRect().exec((r) => {
|
||||||
|
// this.setData({
|
||||||
|
// swiperItemHeight: r[0].height
|
||||||
|
// })
|
||||||
|
// });
|
||||||
|
this.setData({
|
||||||
|
userInfo: getApp().globalData.userInfo,
|
||||||
|
systemInfo: getApp().globalData.systemInfo
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理弹框的集数
|
||||||
|
handelOrder(isBatchlist) {
|
||||||
|
|
||||||
|
const num = 30;
|
||||||
|
let remain = 0;
|
||||||
|
let temp = [];
|
||||||
|
const mlist = [];
|
||||||
|
let orderObj = {};
|
||||||
|
if (Array.isArray(isBatchlist.data)) {
|
||||||
|
isBatchlist.data.forEach((m, idx) => {
|
||||||
|
if ((num * remain + num) < m.order) {
|
||||||
|
remain += 1;
|
||||||
|
temp = [];
|
||||||
|
}
|
||||||
|
temp.push(m);
|
||||||
|
orderObj[remain] = {
|
||||||
|
firstNum: num * remain + 1,
|
||||||
|
lastNum: m.order,
|
||||||
|
title: `${num * remain + 1}-${m.order}`,
|
||||||
|
temp: temp
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Object.keys(orderObj).map((m) => {
|
||||||
|
mlist.push(orderObj[m]);
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
orderList: mlist,
|
||||||
|
batchAllOrder: isBatchlist.data.length,
|
||||||
|
batchAllList: isBatchlist.data,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
orderList: [],
|
||||||
|
batchAllOrder: 0,
|
||||||
|
batchAllList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handelOrderIsVip(resData) {
|
||||||
|
const orderList = this.data.orderList;
|
||||||
|
const batchAllList = this.data.batchAllList;
|
||||||
|
// swiperList.splice(current, 1, resData);
|
||||||
|
if (resData.chackpay == 1) {
|
||||||
|
const ols = [];
|
||||||
|
orderList.forEach((j) => {
|
||||||
|
let jb = {
|
||||||
|
...j
|
||||||
|
}
|
||||||
|
const yus = [];
|
||||||
|
j.temp.forEach((y) => {
|
||||||
|
let yobj = {
|
||||||
|
...y,
|
||||||
|
}
|
||||||
|
if (yobj.id == resData.id) {
|
||||||
|
yobj.isvip = 0;
|
||||||
|
}
|
||||||
|
yus.push(yobj);
|
||||||
|
})
|
||||||
|
jb.temp = yus;
|
||||||
|
ols.push(jb);
|
||||||
|
})
|
||||||
|
let newBatchAllList = [...batchAllList];
|
||||||
|
newBatchAllList[resData.order - 1].isvip = 0;
|
||||||
|
this.setData({
|
||||||
|
batchAllList: newBatchAllList
|
||||||
|
})
|
||||||
|
|
||||||
|
return ols;
|
||||||
|
}
|
||||||
|
return orderList;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取 剧情
|
||||||
|
async isVideoPaymentFn(sid) {
|
||||||
|
const paramVideo = {
|
||||||
|
path: '/videoread',
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
sid: sid
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const videoRead = await httpRequest(paramVideo);
|
||||||
|
|
||||||
|
if (Array.isArray(videoRead.data)) {
|
||||||
|
|
||||||
|
const videoInfoObj = videoRead.data[0];
|
||||||
|
const paramenter = {
|
||||||
|
path: '/batchlist',
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
sid: videoInfoObj.sid,
|
||||||
|
start: 1,
|
||||||
|
end: videoInfoObj.total
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const isBatchlist = await httpRequest(paramenter);
|
||||||
|
const selectOrderInfo = this.handelOrder(isBatchlist);
|
||||||
|
console.log(selectOrderInfo, "selectOrderInfo")
|
||||||
|
|
||||||
|
this.setData({
|
||||||
|
swiperOrder: videoInfoObj.order,
|
||||||
|
videoInfoObj: videoInfoObj,
|
||||||
|
swiperCurrent: videoInfoObj.order - 1,
|
||||||
|
changeCuurent: videoInfoObj.order - 1,
|
||||||
|
posterCover: videoInfoObj.videocover || videoInfoObj.cover,
|
||||||
|
orderList: selectOrderInfo.orderList,
|
||||||
|
batchAllOrder: selectOrderInfo.batchAllList,
|
||||||
|
batchAllList: selectOrderInfo.batchAllList,
|
||||||
|
})
|
||||||
|
|
||||||
|
my.setNavigationBar({
|
||||||
|
title: videoInfoObj.title,
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
toPathPlayAllOrder() {
|
||||||
|
|
||||||
|
const videoInfoObj = this.data.videoInfoObj;
|
||||||
|
const sid = this.data.sid;
|
||||||
|
|
||||||
|
const paramVideo = {
|
||||||
|
path: '/buyall',
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
sid: sid,
|
||||||
|
id: videoInfoObj.id,
|
||||||
|
allprice: videoInfoObj.allprice
|
||||||
|
},
|
||||||
|
errObj: {
|
||||||
|
2: {
|
||||||
|
showToastFlag: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
httpRequest(paramVideo).then(res => {
|
||||||
|
if (res.status == 1) {
|
||||||
|
my.showToast({
|
||||||
|
type: 'none',
|
||||||
|
content: res.msg || '购买成功',
|
||||||
|
duration: 1000,
|
||||||
|
})
|
||||||
|
this.isVideoPaymentFn(sid);
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
if (err.status == 2) {
|
||||||
|
my.confirm({
|
||||||
|
title: '温馨提示',
|
||||||
|
content: err.msg,
|
||||||
|
confirmButtonText: '去充值',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
success: (result) => {
|
||||||
|
if (result.confirm) {
|
||||||
|
this.setData({
|
||||||
|
popupShow: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handelswiperCurrent(ev) {
|
||||||
|
const current = ev.detail.current;
|
||||||
|
const isThrottle = this.data.isThrottle;
|
||||||
|
isThrottle(current);
|
||||||
|
},
|
||||||
|
|
||||||
|
videoErrorFn(e) {
|
||||||
|
console.log(e, "eee")
|
||||||
|
},
|
||||||
|
|
||||||
|
videoEndedFn() {
|
||||||
|
const videoInfoObj = this.data.videoInfoObj;
|
||||||
|
const sid = this.data.sid;
|
||||||
|
// const swiperList = this.data.swiperList;
|
||||||
|
const id = videoInfoObj.nextid;
|
||||||
|
// const current = videoInfoObj.order;
|
||||||
|
const paramVideo = {
|
||||||
|
path: '/videoread',
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
sid: sid,
|
||||||
|
id: id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
httpRequest(paramVideo).then(res => {
|
||||||
|
// swiperList.map()
|
||||||
|
const resData = res.data[0];
|
||||||
|
const ols = this.handelOrderIsVip(resData);
|
||||||
|
// swiperList.splice(current, 1, resData);
|
||||||
|
this.setData({
|
||||||
|
// swiperList: swiperList,
|
||||||
|
swiperCurrent: resData.order - 1,
|
||||||
|
changeCuurent: resData.order - 1,
|
||||||
|
videoInfoObj: resData,
|
||||||
|
orderList: ols,
|
||||||
|
// swiperOrder: resData.order
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onTimeUpdate(ed) {
|
||||||
|
console.log(ed, "=========")
|
||||||
|
},
|
||||||
|
|
||||||
|
//显示 选择集数
|
||||||
|
selectEpisodesFn() {
|
||||||
|
this.setData({
|
||||||
|
orderPopupShow: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭 选择集数
|
||||||
|
closeOrderPopup() {
|
||||||
|
this.setData({
|
||||||
|
orderPopupShow: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 切换 级数的
|
||||||
|
handleTabClick(ev) {
|
||||||
|
// console.log(e, "handleTabClickhandleTabClick")
|
||||||
|
this.setData({
|
||||||
|
activeTab: ev.index
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
handleOrderCurrent(ev) {
|
||||||
|
const item = ev.target.dataset.item;
|
||||||
|
// const orderList = this.data.orderList;
|
||||||
|
// const batchAllOrder = this.data.batchAllOrder;
|
||||||
|
const batchAllList = this.data.batchAllList;
|
||||||
|
if (item.order != 1) {
|
||||||
|
const nextVideoObj = batchAllList[item.order - 2];
|
||||||
|
if (nextVideoObj.isvip == 1) {
|
||||||
|
my.showToast({
|
||||||
|
type: 'info',
|
||||||
|
content: '为了保证剧情连贯，请按顺序观看'
|
||||||
|
})
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// const current = item.order - 1;
|
||||||
|
const sid = this.data.sid;
|
||||||
|
// const swiperList = this.data.swiperList;
|
||||||
|
const paramVideo = {
|
||||||
|
path: '/videoread',
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
sid: sid,
|
||||||
|
id: item.id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
httpRequest(paramVideo).then(res => {
|
||||||
|
// swiperList.map()
|
||||||
|
const resData = res.data[0];
|
||||||
|
const ols = this.handelOrderIsVip(resData);
|
||||||
|
this.setData({
|
||||||
|
// swiperList: swiperList,
|
||||||
|
// swiperCurrent: current,
|
||||||
|
videoInfoObj: resData,
|
||||||
|
// swiperOrder: resData.order,
|
||||||
|
orderPopupShow: false,
|
||||||
|
orderList: ols,
|
||||||
|
swiperCurrent: resData.order - 1,
|
||||||
|
changeCuurent: resData.order - 1,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad(query) {
|
||||||
|
const sid = query.sid;
|
||||||
|
this.setData({
|
||||||
|
sid: sid
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onShow() {
|
||||||
|
const sid = this.data.sid;
|
||||||
|
this.isOtherFn();
|
||||||
|
this.isVideoPaymentFn(sid);
|
||||||
|
// const lodash = require('lodash');
|
||||||
|
const isThrottle = _.throttle((current) => {
|
||||||
|
let id = '';
|
||||||
|
const changeCuurent = this.data.changeCuurent;
|
||||||
|
const videoInfoObj = this.data.videoInfoObj;
|
||||||
|
const sid = this.data.sid;
|
||||||
|
if (current > changeCuurent) {
|
||||||
|
id = videoInfoObj.nextid;
|
||||||
|
} else {
|
||||||
|
id = videoInfoObj.lastid;
|
||||||
|
}
|
||||||
|
const paramVideo = {
|
||||||
|
path: '/videoread',
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
sid: sid,
|
||||||
|
id: id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
httpRequest(paramVideo).then(res => {
|
||||||
|
// swiperList.map()
|
||||||
|
const resData = res.data[0]
|
||||||
|
// swiperList.splice(current, 1, resData);
|
||||||
|
const ols = this.handelOrderIsVip(resData);
|
||||||
|
this.setData({
|
||||||
|
// swiperList: swiperList,
|
||||||
|
// swiperCurrent: current,
|
||||||
|
changeCuurent: current,
|
||||||
|
videoInfoObj: resData,
|
||||||
|
orderList: ols,
|
||||||
|
swiperOrder: resData.order
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}, 300, { trailing: false });
|
||||||
|
this.setData({
|
||||||
|
isThrottle: isThrottle,
|
||||||
|
pageHideFlag: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
toPathPlayPage() {
|
||||||
|
// my.navigateTo({
|
||||||
|
// url: '/pages/recharge/recharge'
|
||||||
|
// });
|
||||||
|
this.setData({
|
||||||
|
popupShow: true,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onClosePopup(mi) {
|
||||||
|
const videoInfoObj = this.data.videoInfoObj;
|
||||||
|
if (mi.resultCode == 9000 && videoInfoObj.chackpay == 2) {
|
||||||
|
const sid = this.data.sid;
|
||||||
|
const paramVideo = {
|
||||||
|
path: '/videoread',
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
sid: sid,
|
||||||
|
id: videoInfoObj.id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
httpRequest(paramVideo).then(res => {
|
||||||
|
const resData = res.data[0];
|
||||||
|
const ols = this.handelOrderIsVip(resData);
|
||||||
|
this.setData({
|
||||||
|
popupShow: false,
|
||||||
|
videoInfoObj: resData,
|
||||||
|
orderList: ols
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.setData({
|
||||||
|
popupShow: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 添加追剧
|
||||||
|
addChasingDramasFn() {
|
||||||
|
const videoInfoObj = this.data.videoInfoObj;
|
||||||
|
if (videoInfoObj.iskeep == 0) {
|
||||||
|
|
||||||
|
const paramenter = {
|
||||||
|
path: '/addkeep',
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
sid: videoInfoObj.sid
|
||||||
|
}
|
||||||
|
}
|
||||||
|
httpRequest(paramenter).then(() => {
|
||||||
|
my.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
content: '追剧成功',
|
||||||
|
duration: 1000,
|
||||||
|
});
|
||||||
|
this.setData({
|
||||||
|
videoInfoObj: {
|
||||||
|
...videoInfoObj,
|
||||||
|
iskeep: 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
} else {
|
||||||
|
const paramenter = {
|
||||||
|
path: '/chasingdramadel',
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
sid: videoInfoObj.sid
|
||||||
|
}
|
||||||
|
}
|
||||||
|
httpRequest(paramenter).then(() => {
|
||||||
|
my.showToast({
|
||||||
|
type: 'none',
|
||||||
|
content: '取消成功',
|
||||||
|
duration: 1000,
|
||||||
|
});
|
||||||
|
this.setData({
|
||||||
|
videoInfoObj: {
|
||||||
|
...videoInfoObj,
|
||||||
|
iskeep: 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
this.setData({
|
||||||
|
pageHideFlag: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
14
pages/videoAndroid/videoAndroid.json
Normal file
14
pages/videoAndroid/videoAndroid.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"pullRefresh": false,
|
||||||
|
"allowsBounceVertical": "NO",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"titleBarColor": "#000",
|
||||||
|
"usingComponents": {
|
||||||
|
"am-icon": "mini-antui/es/am-icon/index",
|
||||||
|
"modal": "mini-antui/es/modal/index",
|
||||||
|
"popup": "mini-antui/es/popup/index",
|
||||||
|
"tabs": "mini-antui/es/tabs/index",
|
||||||
|
"tab-content": "mini-antui/es/tabs/tab-content/index",
|
||||||
|
"my-pay": "/components/myPay/myPay"
|
||||||
|
}
|
||||||
|
}
|
||||||
539
static/fontIcon/demo.css
Normal file
539
static/fontIcon/demo.css
Normal file
@ -0,0 +1,539 @@
|
|||||||
|
/* Logo 字体 */
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont logo";
|
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-family: "iconfont logo";
|
||||||
|
font-size: 160px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tabs */
|
||||||
|
.nav-tabs {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs .nav-more {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs li {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#tabs .active {
|
||||||
|
border-bottom-color: #f00;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-container .content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面布局 */
|
||||||
|
.main {
|
||||||
|
padding: 30px 100px;
|
||||||
|
width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo {
|
||||||
|
color: #333;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
line-height: 1;
|
||||||
|
height: 110px;
|
||||||
|
margin-top: -50px;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
font-size: 160px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helps {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helps pre {
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px 0;
|
||||||
|
border: solid 1px #e7e1cd;
|
||||||
|
background-color: #fffdef;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists {
|
||||||
|
width: 100% !important;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li {
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none !important;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li .code-name {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .icon {
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
font-size: 42px;
|
||||||
|
margin: 10px auto;
|
||||||
|
color: #333;
|
||||||
|
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .icon:hover {
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .svg-icon {
|
||||||
|
/* 通过设置 font-size 来改变图标大小 */
|
||||||
|
width: 1em;
|
||||||
|
/* 图标和文字相邻时，垂直对齐 */
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||||
|
fill: currentColor;
|
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||||
|
normalize.css 中也包含这行 */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li .name,
|
||||||
|
.icon_lists li .code-name {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* markdown 样式 */
|
||||||
|
.markdown {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown img {
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
color: #404040;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2,
|
||||||
|
.markdown h3,
|
||||||
|
.markdown h4,
|
||||||
|
.markdown h5,
|
||||||
|
.markdown h6 {
|
||||||
|
color: #404040;
|
||||||
|
margin: 1.6em 0 0.6em 0;
|
||||||
|
font-weight: 500;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h5 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h6 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown hr {
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
background: #e9e9e9;
|
||||||
|
margin: 16px 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown p {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>p,
|
||||||
|
.markdown>blockquote,
|
||||||
|
.markdown>.highlight,
|
||||||
|
.markdown>ol,
|
||||||
|
.markdown>ul {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ul>li {
|
||||||
|
list-style: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ul li,
|
||||||
|
.markdown blockquote ul>li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ul li p,
|
||||||
|
.markdown>ol li p {
|
||||||
|
margin: 0.6em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol>li {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ol li,
|
||||||
|
.markdown blockquote ol>li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown code {
|
||||||
|
margin: 0 3px;
|
||||||
|
padding: 0 5px;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown strong,
|
||||||
|
.markdown b {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0px;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
width: 95%;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th,
|
||||||
|
.markdown>table td {
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
padding: 8px 16px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote {
|
||||||
|
font-size: 90%;
|
||||||
|
color: #999;
|
||||||
|
border-left: 4px solid #e9e9e9;
|
||||||
|
padding-left: 0.8em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .anchor {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .waiting {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1:hover .anchor,
|
||||||
|
.markdown h2:hover .anchor,
|
||||||
|
.markdown h3:hover .anchor,
|
||||||
|
.markdown h4:hover .anchor,
|
||||||
|
.markdown h5:hover .anchor,
|
||||||
|
.markdown h6:hover .anchor {
|
||||||
|
opacity: 1;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>br,
|
||||||
|
.markdown>p>br {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
background: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
color: #333333;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-meta {
|
||||||
|
color: #969896;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-strong,
|
||||||
|
.hljs-emphasis,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #df5000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-type {
|
||||||
|
color: #a71d5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-attribute {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-name {
|
||||||
|
color: #63a35c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #795da3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
color: #55a532;
|
||||||
|
background-color: #eaffea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #bd2c00;
|
||||||
|
background-color: #ffecec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 代码高亮 */
|
||||||
|
/* PrismJS 1.15.0
|
||||||
|
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||||
|
/**
|
||||||
|
* prism.js default theme for JavaScript, CSS and HTML
|
||||||
|
* Based on dabblet (http://dabblet.com)
|
||||||
|
* @author Lea Verou
|
||||||
|
*/
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: black;
|
||||||
|
background: none;
|
||||||
|
text-shadow: 0 1px white;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::-moz-selection,
|
||||||
|
pre[class*="language-"] ::-moz-selection,
|
||||||
|
code[class*="language-"]::-moz-selection,
|
||||||
|
code[class*="language-"] ::-moz-selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::selection,
|
||||||
|
pre[class*="language-"] ::selection,
|
||||||
|
code[class*="language-"]::selection,
|
||||||
|
code[class*="language-"] ::selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
pre[class*="language-"] {
|
||||||
|
padding: 1em;
|
||||||
|
margin: .5em 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre)>code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
background: #f5f2f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline code */
|
||||||
|
:not(pre)>code[class*="language-"] {
|
||||||
|
padding: .1em;
|
||||||
|
border-radius: .3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: slategray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.namespace {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
|
color: #905;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #690;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string {
|
||||||
|
color: #9a6e3a;
|
||||||
|
background: hsla(0, 0%, 100%, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.keyword {
|
||||||
|
color: #07a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.function,
|
||||||
|
.token.class-name {
|
||||||
|
color: #DD4A68;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important,
|
||||||
|
.token.variable {
|
||||||
|
color: #e90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
372
static/fontIcon/demo_index.html
Normal file
372
static/fontIcon/demo_index.html
Normal file
@ -0,0 +1,372 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>iconfont Demo</title>
|
||||||
|
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
||||||
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
<link rel="stylesheet" href="iconfont.css">
|
||||||
|
<script src="iconfont.js"></script>
|
||||||
|
<!-- jQuery -->
|
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||||
|
<!-- 代码高亮 -->
|
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||||
|
<style>
|
||||||
|
.main .logo {
|
||||||
|
margin-top: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo .sub-title {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||||
|
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||||
|
|
||||||
|
</a></h1>
|
||||||
|
<div class="nav-tabs">
|
||||||
|
<ul id="tabs" class="dib-box">
|
||||||
|
<li class="dib active"><span>Unicode</span></li>
|
||||||
|
<li class="dib"><span>Font class</span></li>
|
||||||
|
<li class="dib"><span>Symbol</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4338427" target="_blank" class="nav-more">查看项目</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="tab-container">
|
||||||
|
<div class="content unicode" style="display: block;">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">video_play</div>
|
||||||
|
<div class="code-name">&#xe625;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">video</div>
|
||||||
|
<div class="code-name">&#xe7c8;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">暂停</div>
|
||||||
|
<div class="code-name">&#xe651;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">暂停</div>
|
||||||
|
<div class="code-name">&#xe668;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">Play</div>
|
||||||
|
<div class="code-name">&#xeab5;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">双箭头,双角符,右</div>
|
||||||
|
<div class="code-name">&#xea50;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">微信</div>
|
||||||
|
<div class="code-name">&#xe643;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">支付宝</div>
|
||||||
|
<div class="code-name">&#xe607;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="unicode-">Unicode 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||||
|
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||||
|
</ul>
|
||||||
|
<blockquote>
|
||||||
|
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>Unicode 使用步骤如下：</p>
|
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>@font-face {
|
||||||
|
font-family: 'iconfont';
|
||||||
|
src: url('iconfont.woff2?t=1709520057934') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1709520057934') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1709520057934') format('truetype');
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||||
|
<pre>
|
||||||
|
<code class="language-html"
|
||||||
|
><span class="iconfont">&#x33;</span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content font-class">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-videoplay"></span>
|
||||||
|
<div class="name">
|
||||||
|
video_play
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-videoplay
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-video"></span>
|
||||||
|
<div class="name">
|
||||||
|
video
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-video
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-zanting"></span>
|
||||||
|
<div class="name">
|
||||||
|
暂停
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-zanting
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-zanting1"></span>
|
||||||
|
<div class="name">
|
||||||
|
暂停
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-zanting1
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-Play"></span>
|
||||||
|
<div class="name">
|
||||||
|
Play
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-Play
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-double-arrow-right-full"></span>
|
||||||
|
<div class="name">
|
||||||
|
双箭头,双角符,右
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-double-arrow-right-full
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-weixin"></span>
|
||||||
|
<div class="name">
|
||||||
|
微信
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-weixin
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-zhifubao"></span>
|
||||||
|
<div class="name">
|
||||||
|
支付宝
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-zhifubao
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="font-class-">font-class 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||||
|
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||||
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||||
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"
|
||||||
|
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content symbol">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-videoplay"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">video_play</div>
|
||||||
|
<div class="code-name">#icon-videoplay</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-video"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">video</div>
|
||||||
|
<div class="code-name">#icon-video</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-zanting"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">暂停</div>
|
||||||
|
<div class="code-name">#icon-zanting</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-zanting1"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">暂停</div>
|
||||||
|
<div class="code-name">#icon-zanting1</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-Play"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">Play</div>
|
||||||
|
<div class="code-name">#icon-Play</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-double-arrow-right-full"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">双箭头,双角符,右</div>
|
||||||
|
<div class="code-name">#icon-double-arrow-right-full</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-weixin"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">微信</div>
|
||||||
|
<div class="code-name">#icon-weixin</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-zhifubao"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">支付宝</div>
|
||||||
|
<div class="code-name">#icon-zhifubao</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="symbol-">Symbol 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||||
|
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持多色图标了，不再受单色限制。</li>
|
||||||
|
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||||
|
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||||
|
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||||
|
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="language-html"><style>
|
||||||
|
.icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xxx"></use>
|
||||||
|
</svg>
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('.tab-container .content:first').show()
|
||||||
|
|
||||||
|
$('#tabs li').click(function (e) {
|
||||||
|
var tabContent = $('.tab-container .content')
|
||||||
|
var index = $(this).index()
|
||||||
|
|
||||||
|
if ($(this).hasClass('active')) {
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
$('#tabs li').removeClass('active')
|
||||||
|
$(this).addClass('active')
|
||||||
|
|
||||||
|
tabContent.hide().eq(index).fadeIn()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
47
static/fontIcon/iconfont.css
Normal file
47
static/fontIcon/iconfont.css
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "iconfont"; /* Project id 4338427 */
|
||||||
|
src: url('iconfont.woff2?t=1709520057934') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1709520057934') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1709520057934') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-videoplay:before {
|
||||||
|
content: "\e625";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-video:before {
|
||||||
|
content: "\e7c8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zanting:before {
|
||||||
|
content: "\e651";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zanting1:before {
|
||||||
|
content: "\e668";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-Play:before {
|
||||||
|
content: "\eab5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-double-arrow-right-full:before {
|
||||||
|
content: "\ea50";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-weixin:before {
|
||||||
|
content: "\e643";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zhifubao:before {
|
||||||
|
content: "\e607";
|
||||||
|
}
|
||||||
|
|
||||||
1
static/fontIcon/iconfont.js
Normal file
1
static/fontIcon/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
65
static/fontIcon/iconfont.json
Normal file
65
static/fontIcon/iconfont.json
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
{
|
||||||
|
"id": "4338427",
|
||||||
|
"name": "淘宝—古言剧场",
|
||||||
|
"font_family": "iconfont",
|
||||||
|
"css_prefix_text": "icon-",
|
||||||
|
"description": "",
|
||||||
|
"glyphs": [
|
||||||
|
{
|
||||||
|
"icon_id": "948002",
|
||||||
|
"name": "video_play",
|
||||||
|
"font_class": "videoplay",
|
||||||
|
"unicode": "e625",
|
||||||
|
"unicode_decimal": 58917
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "1096519",
|
||||||
|
"name": "video",
|
||||||
|
"font_class": "video",
|
||||||
|
"unicode": "e7c8",
|
||||||
|
"unicode_decimal": 59336
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5831324",
|
||||||
|
"name": "暂停",
|
||||||
|
"font_class": "zanting",
|
||||||
|
"unicode": "e651",
|
||||||
|
"unicode_decimal": 58961
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "9447889",
|
||||||
|
"name": "暂停",
|
||||||
|
"font_class": "zanting1",
|
||||||
|
"unicode": "e668",
|
||||||
|
"unicode_decimal": 58984
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "12005047",
|
||||||
|
"name": "Play",
|
||||||
|
"font_class": "Play",
|
||||||
|
"unicode": "eab5",
|
||||||
|
"unicode_decimal": 60085
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "18174963",
|
||||||
|
"name": "双箭头,双角符,右",
|
||||||
|
"font_class": "double-arrow-right-full",
|
||||||
|
"unicode": "ea50",
|
||||||
|
"unicode_decimal": 59984
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "10621878",
|
||||||
|
"name": "微信",
|
||||||
|
"font_class": "weixin",
|
||||||
|
"unicode": "e643",
|
||||||
|
"unicode_decimal": 58947
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "15933089",
|
||||||
|
"name": "支付宝",
|
||||||
|
"font_class": "zhifubao",
|
||||||
|
"unicode": "e607",
|
||||||
|
"unicode_decimal": 58887
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
static/fontIcon/iconfont.ttf
Normal file
BIN
static/fontIcon/iconfont.ttf
Normal file
Binary file not shown.
BIN
static/fontIcon/iconfont.woff
Normal file
BIN
static/fontIcon/iconfont.woff
Normal file
Binary file not shown.
BIN
static/fontIcon/iconfont.woff2
Normal file
BIN
static/fontIcon/iconfont.woff2
Normal file
Binary file not shown.
0
static/fontIcon/iconfontStylesheet.acss
Normal file
0
static/fontIcon/iconfontStylesheet.acss
Normal file
Loading…
x
Reference in New Issue
Block a user