619

parent 363b45bd
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=screen-orientation content=portrait><meta name=x5-orientation content=portrait><title>唱唱启蒙英语</title><link rel=stylesheet href=https://at.alicdn.com/t/font_822651_g9r2j7kybxu.css><style>*{ <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=screen-orientation content=portrait><meta name=x5-orientation content=portrait><title>唱唱启蒙英语</title><link rel=stylesheet href=https://at.alicdn.com/t/font_822651_g9r2j7kybxu.css><style>*{
-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling:touch;
}</style><link href=https://static-cdn.changchangenglish.com/new-sing/static/css/app.5ada2d3a39a37064d994e47dee53141d.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/manifest.eab82054aba7a787063e.js></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/vendor.59555ccdee2c4b192710.js></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/app.1a33c48c553373cfcc15.js></script></body></html> }</style><link href=https://static-cdn.changchangenglish.com/new-sing/static/css/app.16ab72259f52ba65affa6fe9c62d6cf8.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/manifest.d442186d77b4aaf3e659.js></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/vendor.59555ccdee2c4b192710.js></script><script type=text/javascript src=https://static-cdn.changchangenglish.com/new-sing/static/js/app.1a33c48c553373cfcc15.js></script></body></html>
\ No newline at end of file \ No newline at end of file
This diff is collapsed.
This diff is collapsed.
!function(e){var c=window.webpackJsonp;window.webpackJsonp=function(f,t,r){for(var d,o,b,i=0,u=[];i<f.length;i++)o=f[i],a[o]&&u.push(a[o][0]),a[o]=0;for(d in t)Object.prototype.hasOwnProperty.call(t,d)&&(e[d]=t[d]);for(c&&c(f,t,r);u.length;)u.shift()();if(r)for(i=0;i<r.length;i++)b=n(n.s=r[i]);return b};var f={},a={42:0};function n(c){if(f[c])return f[c].exports;var a=f[c]={i:c,l:!1,exports:{}};return e[c].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.e=function(e){var c=a[e];if(0===c)return new Promise(function(e){e()});if(c)return c[2];var f=new Promise(function(f,n){c=a[e]=[f,n]});c[2]=f;var t=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,n.nc&&r.setAttribute("nonce",n.nc),r.src=n.p+"static/js/"+e+"."+{0:"719dc3f7f0ed1bbd1996",1:"265692694ccbd64ed997",2:"6534f2bf3c91856a4970",3:"8c954636e0d36ec0afe3",4:"7217efcfd5408cc9e947",5:"3152eee324b7a590a698",6:"7e54017083b950b6fcd3",7:"b798e0059a30f73754c6",8:"90c94e5d1da85a5a9c2e",9:"82cb51d3c94a2d0759fa",10:"c39b8955de006108028d",11:"97b829918794c73c16f1",12:"2e2251bd3bd75f2f6633",13:"17ee6010ae9c2147f433",14:"5a1da6973b3a06942c82",15:"be8f80faaf19b1a940a4",16:"8425717719df5377dff3",17:"d265e1d13eb3ec85f9e2",18:"53cc8db4bd2ac224ff61",19:"d33956c55fc42cdecc67",20:"8a53c65879fd711c0096",21:"086afd34b50f94f69fc9",22:"857e5f7a9b0c8ef40b96",23:"17250917af5d63e45f38",24:"8d02dce06144460fc2cc",25:"37beff2bc83ec011dd3f",26:"b209d77918cf1543a885",27:"fcfa1f45493204a0fb6b",28:"fb9f440a0dca1ce68cd8",29:"b8525fbfff4eed00593d",30:"03a08822c6989cd43507",31:"bb08ce346fbc90513ec4",32:"eb8f796b3e1909e07ce3",33:"8ead1cffebe2f222b3ec",34:"212fd4e4fb0e0f479209",35:"9bf8f61185245e4bbe8a",36:"a6ca2e8d50cd55726404",37:"0b5f2c665118aa151c50",38:"e7d83bad0ab5744c11cd",39:"ed82f86a8b4c7438ceb5"}[e]+".js";var d=setTimeout(o,12e4);function o(){r.onerror=r.onload=null,clearTimeout(d);var c=a[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),a[e]=void 0)}return r.onerror=r.onload=o,t.appendChild(r),f},n.m=e,n.c=f,n.d=function(e,c,f){n.o(e,c)||Object.defineProperty(e,c,{configurable:!1,enumerable:!0,get:f})},n.n=function(e){var c=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(c,"a",c),c},n.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},n.p="https://static-cdn.changchangenglish.com/new-sing/",n.oe=function(e){throw e}}([]); !function(e){var c=window.webpackJsonp;window.webpackJsonp=function(f,t,r){for(var d,o,b,i=0,u=[];i<f.length;i++)o=f[i],a[o]&&u.push(a[o][0]),a[o]=0;for(d in t)Object.prototype.hasOwnProperty.call(t,d)&&(e[d]=t[d]);for(c&&c(f,t,r);u.length;)u.shift()();if(r)for(i=0;i<r.length;i++)b=n(n.s=r[i]);return b};var f={},a={42:0};function n(c){if(f[c])return f[c].exports;var a=f[c]={i:c,l:!1,exports:{}};return e[c].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.e=function(e){var c=a[e];if(0===c)return new Promise(function(e){e()});if(c)return c[2];var f=new Promise(function(f,n){c=a[e]=[f,n]});c[2]=f;var t=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,n.nc&&r.setAttribute("nonce",n.nc),r.src=n.p+"static/js/"+e+"."+{0:"719dc3f7f0ed1bbd1996",1:"e538afe5bebe6897a3f7",2:"6534f2bf3c91856a4970",3:"8c954636e0d36ec0afe3",4:"7217efcfd5408cc9e947",5:"3152eee324b7a590a698",6:"7e54017083b950b6fcd3",7:"b798e0059a30f73754c6",8:"90c94e5d1da85a5a9c2e",9:"82cb51d3c94a2d0759fa",10:"c39b8955de006108028d",11:"97b829918794c73c16f1",12:"2e2251bd3bd75f2f6633",13:"17ee6010ae9c2147f433",14:"5a1da6973b3a06942c82",15:"be8f80faaf19b1a940a4",16:"8425717719df5377dff3",17:"d265e1d13eb3ec85f9e2",18:"53cc8db4bd2ac224ff61",19:"d33956c55fc42cdecc67",20:"8a53c65879fd711c0096",21:"086afd34b50f94f69fc9",22:"857e5f7a9b0c8ef40b96",23:"17250917af5d63e45f38",24:"8d02dce06144460fc2cc",25:"37beff2bc83ec011dd3f",26:"b209d77918cf1543a885",27:"fcfa1f45493204a0fb6b",28:"fb9f440a0dca1ce68cd8",29:"b8525fbfff4eed00593d",30:"03a08822c6989cd43507",31:"bb08ce346fbc90513ec4",32:"eb8f796b3e1909e07ce3",33:"8ead1cffebe2f222b3ec",34:"212fd4e4fb0e0f479209",35:"9bf8f61185245e4bbe8a",36:"a6ca2e8d50cd55726404",37:"0b5f2c665118aa151c50",38:"e7d83bad0ab5744c11cd",39:"ed82f86a8b4c7438ceb5"}[e]+".js";var d=setTimeout(o,12e4);function o(){r.onerror=r.onload=null,clearTimeout(d);var c=a[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),a[e]=void 0)}return r.onerror=r.onload=o,t.appendChild(r),f},n.m=e,n.c=f,n.d=function(e,c,f){n.o(e,c)||Object.defineProperty(e,c,{configurable:!1,enumerable:!0,get:f})},n.n=function(e){var c=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(c,"a",c),c},n.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},n.p="https://static-cdn.changchangenglish.com/new-sing/",n.oe=function(e){throw e}}([]);
\ No newline at end of file \ No newline at end of file
src/assets/rankBg.png

31.7 KB | W: | H:

src/assets/rankBg.png

32.6 KB | W: | H:

src/assets/rankBg.png
src/assets/rankBg.png
src/assets/rankBg.png
src/assets/rankBg.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</div> </div>
<scroll class="scroll" v-if="0" :data="showObj.video" ref="scrollDom" :scrollX="true" :bounce="true" > <scroll class="scroll" v-if="0" :data="showObj.video" ref="scrollDom" :scrollX="true" :bounce="true" >
<div class="itemBox" ref="itembox"> <div class="itemBox" ref="itembox">
<div class="item" v-for="(i,index) in testCount" @click="scrollFn(index)" > <div :class="{item:true,activity:videoStyle==index}" v-for="(i,index) in testCount" @click="scrollFn(index)" >
{{index}} {{index}}
</div> </div>
</div> </div>
...@@ -96,7 +96,8 @@ ...@@ -96,7 +96,8 @@
tapToAudio:tapToAudio tapToAudio:tapToAudio
}, },
orientationchange:false, orientationchange:false,
testCount:5 testCount:5,
videoStyle:'0'
} }
}, },
props:[ props:[
...@@ -119,16 +120,15 @@ ...@@ -119,16 +120,15 @@
}, },
methods:{ methods:{
scrollFn(index){ scrollFn(index){
this.videoStyle = index
let parentwidth = Number(getComputedStyle(document.querySelector('.scroll')).width.replace('px','')) let parentwidth = Number(getComputedStyle(document.querySelector('.scroll')).width.replace('px',''))
let itemBoxWidth = Number(getComputedStyle(document.querySelector('.itemBox')).width.replace('px','')) let itemBoxWidth = Number(getComputedStyle(document.querySelector('.itemBox')).width.replace('px',''))
console.log(itemBoxWidth) console.log(itemBoxWidth)
let difWidth = (parentwidth/2)-45 let difWidth = (parentwidth/2)-45
if(index*90>difWidth){ if(index*90>difWidth){
console.log(difWidth)
let indexS = index - 1 let indexS = index - 1
if((index*90-difWidth)<(itemBoxWidth-parentwidth)){ if((index*100-difWidth)<(itemBoxWidth-parentwidth)){
this.$refs.scrollDom.scrollTo(-(index*90-difWidth),0,100) this.$refs.scrollDom.scrollTo(-((index*100)-difWidth),0,100)
}else{ }else{
this.$refs.scrollDom.scrollTo(-(itemBoxWidth-parentwidth),0,100) this.$refs.scrollDom.scrollTo(-(itemBoxWidth-parentwidth),0,100)
} }
...@@ -284,7 +284,12 @@ ...@@ -284,7 +284,12 @@
height: 100px; height: 100px;
border: 1px solid black; border: 1px solid black;
} }
.activity{
border: 1px solid #40A9FF;
// border-color: #40A9FF;
}
} }
} }
.video-page{ .video-page{
.content{ .content{
......
<template>
<div>
<div class="floatBox">
<div class="top"><span>第二阶段星星打卡学习记录:</span><span class="count">40/40</span></div>
<div class="date">时间:2019.06.03-2019.06.23</div>
</div>
<scroll class="scroll" v-if="starNum!=0" :data="starList" :pullup="pullup" :bounce="false" @pullup="onReachBottom">
<div class="itemBox">
<div class="item" v-for="item in starList">
<div class="left">
<p>{{item.desc}}</p>
<p class="date">{{item.created_at}}</p>
</div>
<div class="right">
<span v-if="item.is_add==1" class="add">+{{item.value}}</span>
<span v-if="item.is_add==0" class="reduce">-{{item.value}}</span>
<img :src="star_inner" alt>
</div>
</div>
<div v-if="finished" class="none">没有更多了~</div>
</div>
</scroll>
</div>
</template>
<script>
import rankBg from "../../assets/rankBg.png";
import star_inner from "../../assets/star_inner.png";
import { getUserIntegralApi, getUserIntegralListApi } from "../../service/api";
import { Toast } from "vant";
export default {
name: "index",
data() {
return {
pullup: true,
rankBg: rankBg,
starNum: "",
userDetail: {},
loading: true,
finished: false,
star_inner: star_inner,
starList: [],
page: 1,
offset: 30
};
},
components: {},
methods: {
onReachBottom() {
// console.log("bottom");
if (!this.finished&&this.loading) {
this.loading = false
Toast.loading({
mask: true,
message: ""
});
this.page++;
let json = {
page: this.page,
limit: "18"
};
getUserIntegralListApi(json).then(res => {
this.loading = true
if (res.list.length > 0){
res.list.forEach(element => {
this.starList.push(element);
});
if(res.total==this.starList.length){
this.finished = true;
}
// this.loading = false;
}
Toast.clear();
});
}
},
initPage() {
this.userDetail = JSON.parse(localStorage.getItem("userDesc"));
getUserIntegralApi().then(res => {
this.starNum = res.last_value;
});
let json = {
page: this.page,
limit: "18"
};
getUserIntegralListApi(json).then(res => {
this.starList = res.list;
this.finished=res.total>18?false:true
// console.log(this.finished)
// console.log(res);
});
}
},
mounted() {
this.initPage();
}
};
</script>
<style scoped lang="less">
@import "../../util/public";
.star-activity-page {
border-top: 1px solid transparent;
}
.floatBox {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
z-index: 100;
// padding-bottom: 10 * @toVw;
padding: 10 * @toVw 20 * @toVw ;
margin-bottom: 8* @toVw;
border-bottom: 1px solid #E2E2E2;
.top{
display: flex;
span{line-height: 28* @toVw ;margin: 0;}
}
.count{
font-size: 18 * @toVw;
color: #f27321;
font-weight: 800;
}
.date{
font-size: 12 * @toVw;
color: #999999;
}
}
.secTitle {
text-align: center;
color: #999999;
font-size: 13 * @toVw;
.line {
display: inline-block;
width: 120 * @toVw;
border-bottom: 1px solid #e2e2e2;
position: relative;
top: -3 * @toVw;
}
}
// .scrollP{position: relative;height: 100vh;width: 100%;transform:none;}
.scroll {
padding: 10 * @toVw 20 * @toVw 0;
// margin-top: 180* @toVw;
height: 100%;
overflow: hidden;
position: fixed;
width: 100%;
box-sizing: border-box;
background: white;
.itemBox {
padding-top: 65 * @toVw;
.none {
height: 53 * @toVw;
line-height: 40 * @toVw;
text-align: center;
color: #999999;
font-size: 12px;
}
}
.item {
display: -webkit-flex;
justify-content: space-between;
border-bottom: 1px solid #e2e2e2;
padding: 9 * @toVw 2 * @toVw;
div {
flex: 1;
}
.left {
font-size: 15 * @toVw;
// font-family: Regular;
.date {
color: #999999;
font-size: 13 * @toVw;
margin-top: 4 * @toVw;
}
}
.right {
text-align: right;
font-size: 18 * @toVw;
color: #f27321;
font-weight: 800;
// font-family: Arial-Black;
img {
width: 20 * @toVw;
position: relative;
top: 3 * @toVw;
margin-left: 3 * @toVw;
}
span {
}
.add{}
.reduce{color: #9BC912;}
}
}
}
@media screen and (orientation: landscape) {
// .child-view{height: 300vh;}
.floatBox {
// height: 300vh;
position: relative;
top: 0;
left: 0;
width: 100%;
background: white;
z-index: 100;
padding-bottom: 10 * @toVw;
}
// .child-view{height: 200vh;}
.scroll{position: relative;
height: 50vh;
.itemBox{padding-top: 0 * @toVw;padding-bottom: 10vh;}
}
}
</style>
<style>
</style>
This diff is collapsed.
...@@ -93,6 +93,15 @@ const router =new Router({ ...@@ -93,6 +93,15 @@ const router =new Router({
noNew:true, noNew:true,
} }
}, },
{
path: '/starDetail',
name: 'starDetail',
component: e=>require(['@/components/star/detail'],e),//
meta:{
deep:0,
noNew:true,
}
},
{ {
path: '/zhibo', path: '/zhibo',
name: 'zhibo', name: 'zhibo',
......
...@@ -72,6 +72,28 @@ import orderStatus1 from '../assets/order/order_status1.png' ...@@ -72,6 +72,28 @@ import orderStatus1 from '../assets/order/order_status1.png'
import orderStatus2 from '../assets/order/order_status2.png' import orderStatus2 from '../assets/order/order_status2.png'
import orderStatus3 from '../assets/order/order_status3.png' import orderStatus3 from '../assets/order/order_status3.png'
import orderStatus4 from '../assets/order/order_status4.png' import orderStatus4 from '../assets/order/order_status4.png'
import star_img_title from '../assets/star/img_title@2x.png'
import star_img_xingxing from '../assets/star/img_xingxing@2x.png'
import star_img_bg_win from '../assets/star/img_bg_win@2x.png'
import star_img_bg_lose from '../assets/star/img_bg_lose@2x.png'
import star_img_0 from '../assets/star/img_0@2x.png'
import star_inner from '../assets/star_inner.png'
import star_prize1 from '../assets/star/prize1.png'
import star_prize2 from '../assets/star/prize2.png'
// 星星打卡
export const starPage = {
star_img_title:star_img_title,
star_img_xingxing:star_img_xingxing,
star_img_bg_win:star_img_bg_win,
star_img_bg_lose:star_img_bg_lose,
star_img_0:star_img_0,
star_inner:star_inner,
star_prize1:star_prize1,
star_prize2:star_prize2
};
// 订单状态 // 订单状态
export const order = { export const order = {
orderStatus1:orderStatus1, orderStatus1:orderStatus1,
......
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