Skip to content

Y
year-end-activitiy
提交 6650ea2f 编写于 作者: Yuanzhao.dai's avatar Yuanzhao.dai
浏览文件
操作

通用头部组件和个人明细静态页面

上级 1db9bc08
隐藏空白字符变更
内嵌 并排
正在显示 包含 420 行增加 和 104 行删除
components/normal-header.vue 0 → 100644
浏览文件 @ 6650ea2f
<template>
<section class="header-section" >
<div class="navBar" :style="{height: `${barHeight}Px`,backgroundColor: barColor}"></div>
<header class="header-container">
<img @click="goBack" src="~/assets/img/icon-back.png" alt="">
{{title}}
</header>
</section>
</template>
<script>
export default {
name: "normal-header",
props: {
title: {
type: String,
default: function () {
return ''
}
},
backType: {
type: Number,
default: function () {
return 1
}
},
barHeight: {
type: Number,
default:function () {
return 0
}
},
barColor: {
type: String,
default: function () {
return '#ffffff'
}
}
},
data() {
return {}
},
methods: {
goBack() {
if (this.backType == 1) {
this.$router.go(-1)
} else if(this.backType == 2) {
this.$emit('selfGoBack')
}else {
this.$rocNative.goBack()
}
}
}
}
</script>
<style lang="less" scoped>
.header-section {
width: 100%;
position: fixed;
top: 0;
z-index: 2;
.navBar {
background: #CCCCCC;
}
.header-container {
width: 100%;
height: 44Px;
background: #ffffff;
color: #333333;
font-size: 18px;
display: flex;
align-items: center;
line-height: 44Px;
img {
width: 25px;
height: 25px;
margin-left: 15px;
margin-right: 111.5px;
}
}
}
</style>
\ No newline at end of file
nuxt.config.js
浏览文件 @ 6650ea2f
......@@ -7,7 +7,7 @@ module.exports = {
title: '云鹊奖2019',
meta: [
{ charset: 'utf-8' },
// { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
{ name: 'screen-orientation', content: 'portrait' },
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
{ name: 'format-detection', content: 'telephone=no' },
......
package-lock.json
浏览文件 @ 6650ea2f
......@@ -6283,7 +6283,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -6304,12 +6305,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -6324,17 +6327,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -6451,7 +6457,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
......@@ -6463,6 +6470,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -6477,6 +6485,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -6484,12 +6493,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -6508,6 +6519,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -6588,7 +6600,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
......@@ -6600,6 +6613,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -6722,6 +6736,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -6741,6 +6756,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -6784,7 +6800,8 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
......@@ -8483,8 +8500,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
......@@ -8538,8 +8554,7 @@
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -8656,7 +8671,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
......@@ -8690,14 +8706,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -8716,7 +8730,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -8797,8 +8810,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -8810,7 +8822,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -8896,8 +8907,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -8952,7 +8962,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -8996,14 +9005,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
......@@ -13573,6 +13580,7 @@
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -13719,6 +13727,7 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......
pages/person-detail/index.less
浏览文件 @ 6650ea2f
.person-detail-wrap {
.person-detail {
position: relative;
z-index: 18;
.bg {
background: url(../../assets/img/person-detail/detail-top-bg.png) no-repeat;
background-size: 100% 100%;
width: 100%;
height: 130px;
position: absolute;
z-index: 19;
}
.person-info {
position: relative;
padding: 20px 15px;
z-index: 20;
position: relative;
.info-container {
width: 100%;
height: 130px;
background: url(../../assets/img/person-detail/detail-top-bg.png) no-repeat;
background-size: cover;
overflow: hidden;
.info {
display: flex;
align-items: center;
color: #fff;
font-size: 14px;
span.orge {
color: #FFDD58
}
.header-pic {
padding: 0 15px;
margin-top: 20px;
img {
width: 50px;
height: 50px;
border-radius: 50px;
margin-right: 11px;
border-radius: 100%;
}
.content {
display: flex;
margin-left: 10px;
align-items: center;
.item {
font-size: 14px;
.label {
color: #fff;
}
.value {
color: #FFDD58;
}
}
.line {
display: inline-block;
width: 0.5px;
height: 10px;
background: #fff;
margin: 0 6px;
}
}
}
}
.main-content {
width: 100%;
border-radius: 20px 20px 0px 0px;
position: absolute;
top: 90px;
background: #fff;
.get-container {
padding: 15px;
background: #FFF7F2;
height: 68px;
border-radius: 20px 20px 0px 0px;
.top {
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 18px;
color: #373839;
font-weight: 700;
}
.how-to-get {
color: #676869;
font-weight: 700;
font-size: 12px;
height: 33px;
display: flex;
align-items: center;
img {
width: 6px;
height: 11px;
margin-left: 2px;
}
}
}
.awards-details {
font-size: 14px;
font-weight: 700;
color: #FD663F;
line-height: 20px;
}
}
.detail-list {
padding: 0 15px;
.item {
display: flex;
align-items: center;
padding: 15px 0 14px 0;
position: relative;
.left {
margin-right: 15px;
img {
width: 50px;
height: 50px;
}
}
.right {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
.r-left {
.detail-name {
color: #373839;
font-size: 16px;
font-weight: 700;
line-height: 16px;
}
.time {
color: #676869;
font-size: 13px;
line-height: 13px;
margin-top: 8px;
}
}
.r-right {
.award-item {
font-size: 13px;
font-weight: 700;
height: 13px;
margin-bottom: 9px;
.num {
color: #FD5A2F;
}
.award-name {
color: #373839;
}
}
.award-item:last-child {
margin-bottom: 0;
}
}
}
}
.item:after {
position: absolute;
content: " ";
left: 0;
bottom: 0;
right: 0;
height: 1PX;
border-bottom: 1PX solid #F0F1F2;
color: #F0F1F2;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
.no-more {
height: 62px;
display: flex;
justify-content: center;
align-items: center;
.line {
display: inline-block;
width: 84px;
height: 1px;
background:#F7F7F7;
}
.text {
color: #BEC2CC;
font-size: 13px;
margin: 0 8px;
}
}
}
......
pages/person-detail/index.vue
浏览文件 @ 6650ea2f
<template>
<div class="person-detail-wrap">
<div class="person-detail">
<div class="bg"></div>
<div class="person-info">
<img class="header-pic" src="https://pics2.baidu.com/feed/b3fb43166d224f4acd2725cb12a05e579922d10d.jpeg?token=1fefde88eededad95a771a0daa49c7ea&s=F63015C74A323A900A8D193803008010"/>
<div>
累计排名 <span class="orge">123</span> | 累计勤奋分 <span class="orge">123</span>
</div>
<section class="person-detail-wrap">
<normal-header
:title="title"
:barHeight="barHeight"
:barColor="barColor"
:backType="1">
</normal-header>
<div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
<div class="info">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
<div class="content">
<p class="item">
<span class="label">累计排名</span>
<span class="value">105</span>
</p>
<p class="line"></p>
<p class="item">
<span class="label">累计勤奋分 </span>
<span class="value">105</span>
</p>
</div>
</div>
</div>
<div class="main-content">
<!--<div class="get-container">
<div class="top">
<div class="title">累计获得奖励</div>
<div class="how-to-get">如何领取<img src="~/assets/img/person-detail/icon-right.png" alt=""></div>
</div>
<div class="awards-details">血压计 1 支/温度计 1 支/小米电视4C 2 台/米家洗衣机 1 台/米家冰箱 2 台/华为荣耀Play3 2 部</div>
</div>-->
<div class="detail-list">
<div class="item">
<div class="left">
<img src="~/assets/img/person-detail/icon-clock-in.png" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">每日打卡</p>
<p class="time">2019.12.15</p>
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="~/assets/img/person-detail/icon-invite.png" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">邀请好友</p>
<p class="time">2019.12.15</p>
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="~/assets/img/person-detail/icon-study.png" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">课程学习</p>
<p class="time">2019.12.15</p>
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="~/assets/img/person-detail/icon-clock-in.png" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">每日打卡</p>
<p class="time">2019.12.15</p>
</div>
<div class="detail-list">
<div class="list-item">
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div>
</div>
<div class="no-more">
<span class="line"></span>
<span class="text">到底啦</span>
<span class="line"></span>
</div>
</div>
</section>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import { Toast, List ,Popup} from 'vant';
// import Dialog from '@/components/dialog';
// import Ajax from '@/assets/commons/tools/ajax';
// import BottomPop from '@/components/bottom-pop.vue';
// import ShipSelect from './child/ship-select';
//
// Vue.use(List).use(Popup);
export default {
head() {
return {
title: '添加居民',
};
import NormalHeader from '@/components/normal-header'
export default {
name: 'person-detail',
components: {
NormalHeader
},
data() {
return {
showPop:false
};
return {
showPop: false,
title: '个人明细',
barHeight: 0,
barColor: '#fff',
};
},
computed: {
// ...mapState({
// list: state => state.smsInviteResident.chooseSmsResident,
// doctorId: state => state.logins.doctorId,
// projectId: state => state.logins.projectId,
// sAuthentication:state => state.logins.isAuthentication,
// }),
},
components: {
},
mounted() {
},
methods: {
},
};
methods: {},
};
</script>
<style lang="less" scoped>
......
pages/prehot.vue
浏览文件 @ 6650ea2f
<template>
<section class="index-wrap" :class="{'padbtm50': (showFixed && showRemindBtn)}">
<h5header v-if="!isWeb" title="云鹊奖2019" :scrollVal="scrollVal" :baseShowHeight="25" :shareObj="shareObj" :setedScroll="true" />
<h5header v-if="isWeb" title="云鹊奖2019" :scrollVal="scrollVal" :baseShowHeight="25" :shareObj="shareObj" :setedScroll="true" />
<div id="imgHeight1">
<img src="../assets/img/img1.png" />
<img src="../assets/img/img2.png" />
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或