Skip to content

U
uni-app

DCloud / uni-app
2 个月 前同步成功

通知 716
Star 38705
Fork 3642
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 8af25105 编写于 作者: 郭 郭胜强
浏览文件
操作

调整看图示例：显示使用upx；div改为view标签

上级 259d4002 7c76ec86
隐藏空白更改
内联 并排
Showing with 122 addition and 121 deletion
examples/image-template/common/common.css
浏览文件 @ 8af25105
...@@ -22,35 +22,35 @@ ...@@ -22,35 +22,35 @@
.card { .card {
position: relative; position: relative;
width: 710px; width: 710upx;
margin: 20px 20px 20px 20px; margin: 20upx 20upx 20upx 20upx;
border-radius: 10px; border-radius: 10upx;
overflow: hidden; overflow: hidden;
flex-direction: column; flex-direction: column;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.card-img { .card-img {
width: 710px; width: 710upx;
height: 1065px; height: 1065upx;
} }
.card-num { .card-num {
color: #FFFFFF; color: #FFFFFF;
font-size: 26px; font-size: 26upx;
text-align: center; text-align: center;
} }
.card-num-view { .card-num-view {
background-color: #FF80AB; background-color: #FF80AB;
height: 30px; height: 30upx;
line-height: 30px; line-height: 30upx;
padding: 0 10px; padding: 0 10upx;
justify-content: center; justify-content: center;
border-radius: 30px; border-radius: 30upx;
position: absolute; position: absolute;
top: 20px; top: 20upx;
right: 20px; right: 20upx;
} }
.card-bottm { .card-bottm {
...@@ -61,10 +61,10 @@ ...@@ -61,10 +61,10 @@
.card-share-view { .card-share-view {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 14px 0; padding: 14upx 0;
color: #FF80AB; color: #FF80AB;
margin: 20px 20px 20px; margin: 20upx 20upx 20upx;
font-size: 30px; font-size: 30upx;
font-family: texticons; font-family: texticons;
} }
...@@ -74,12 +74,12 @@ ...@@ -74,12 +74,12 @@
.car-title-view { .car-title-view {
flex: 1; flex: 1;
padding: 14px 0px 14px 20px; padding: 14upx 0upx 14upx 20upx;
} }
.card-title { .card-title {
flex: 1; flex: 1;
font-size: 30px; font-size: 30upx;
text-align: left; text-align: left;
color: #555555; color: #555555;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -103,33 +103,33 @@ ...@@ -103,33 +103,33 @@
/*双列表*/ /*双列表*/
.card-list2 { .card-list2 {
width: 345px; width: 345upx;
margin: 20px 0 20px 20px; margin: 20upx 0 20upx 20upx;
} }
.card-list2-img { .card-list2-img {
width: 345px; width: 345upx;
height: 517px; height: 517upx;
} }
.card-list2-num-view { .card-list2-num-view {
height: 27px; height: 27upx;
border-radius: 27px; border-radius: 27upx;
} }
.card-list2-num { .card-list2-num {
font-size: 22px; font-size: 22upx;
} }
.card-list2-title { .card-list2-title {
font-size: 26px; font-size: 26upx;
} }
.loadMore { .loadMore {
font-size: 30px; font-size: 30upx;
color: #555; color: #555;
margin-bottom: 20px; margin-bottom: 20upx;
} }
...@@ -142,8 +142,8 @@ ...@@ -142,8 +142,8 @@
.tags { .tags {
background: #fff; background: #fff;
flex: 1; flex: 1;
width: 710px; width: 710upx;
margin: 20px; margin: 20upx;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
...@@ -152,21 +152,21 @@ ...@@ -152,21 +152,21 @@
.tag { .tag {
display: block; display: block;
width: 177.5px; width: 177.5upx;
height: 180px; height: 180upx;
padding: 24px; padding: 24upx;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
} }
.tag-img { .tag-img {
border-radius: 60px; border-radius: 60upx;
width: 120px; width: 120upx;
height: 120px; height: 120upx;
} }
.tag-text { .tag-text {
font-size: 28px; font-size: 28upx;
color: #555555; color: #555555;
} }
...@@ -181,9 +181,9 @@ ...@@ -181,9 +181,9 @@
} }
.logo { .logo {
width: 750px; width: 750upx;
height: 240px; height: 240upx;
padding: 20px; padding: 20upx;
box-sizing: border-box; box-sizing: border-box;
background-color: #FF80AB; background-color: #FF80AB;
flex-direction: row; flex-direction: row;
...@@ -195,86 +195,86 @@ ...@@ -195,86 +195,86 @@
} }
.logo-img { .logo-img {
width: 150px; width: 150upx;
height: 150px; height: 150upx;
border-radius: 150px; border-radius: 150upx;
} }
.logo-title { .logo-title {
height: 150px; height: 150upx;
flex: 1; flex: 1;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-direction: row; flex-direction: row;
margin-left: 20px; margin-left: 20upx;
} }
.uer-name { .uer-name {
height: 60px; height: 60upx;
line-height: 60px; line-height: 60upx;
font-size: 38px; font-size: 38upx;
color: #FFFFFF; color: #FFFFFF;
} }
.go-login.navigat-arrow { .go-login.navigat-arrow {
font-size: 38px; font-size: 38upx;
color: #FFFFFF; color: #FFFFFF;
} }
.login-title { .login-title {
height: 150px; height: 150upx;
align-items: self-start; align-items: self-start;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
margin-left: 20px; margin-left: 20upx;
} }
.center-list { .center-list {
background-color: #FFFFFF; background-color: #FFFFFF;
margin-top: 20px; margin-top: 20upx;
width: 750px; width: 750upx;
flex-direction: column; flex-direction: column;
} }
.center-list-item { .center-list-item {
height: 90px; height: 90upx;
width: 750px; width: 750upx;
box-sizing: border-box; box-sizing: border-box;
flex-direction: row; flex-direction: row;
padding: 0px 20px; padding: 0upx 20upx;
} }
.border-bottom { .border-bottom {
border-bottom-width: 1px; border-bottom-width: 1upx;
border-color: #c8c7cc; border-color: #c8c7cc;
border-bottom-style: solid; border-bottom-style: solid;
} }
.list-icon { .list-icon {
width: 40px; width: 40upx;
height: 90px; height: 90upx;
line-height: 90px; line-height: 90upx;
font-size: 34px; font-size: 34upx;
color: #FF80AB; color: #FF80AB;
text-align: center; text-align: center;
font-family: texticons; font-family: texticons;
margin-right: 20px; margin-right: 20upx;
} }
.list-text { .list-text {
height: 90px; height: 90upx;
line-height: 90px; line-height: 90upx;
font-size: 34px; font-size: 34upx;
color: #555; color: #555;
flex: 1; flex: 1;
text-align: left; text-align: left;
} }
.navigat-arrow { .navigat-arrow {
height: 90px; height: 90upx;
width: 40px; width: 40upx;
line-height: 90px; line-height: 90upx;
font-size: 34px; font-size: 34upx;
color: #555; color: #555;
text-align: right; text-align: right;
font-family: texticons; font-family: texticons;
...@@ -289,57 +289,57 @@ ...@@ -289,57 +289,57 @@
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
width: 750px; width: 750upx;
padding-top: 30px; padding-top: 30upx;
} }
.input-view { .input-view {
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 3px; border-bottom-width: 3upx;
border-bottom-color: #ddd; border-bottom-color: #ddd;
background-color: #fff; background-color: #fff;
flex-direction: row; flex-direction: row;
width: 750px; width: 750upx;
padding: 20px 20px; padding: 20upx 20upx;
box-sizing: border-box; box-sizing: border-box;
} }
.label-view { .label-view {
width: 100px; width: 100upx;
height: 60px; height: 60upx;
align-items: center; align-items: center;
margin-right: 30px; margin-right: 30upx;
} }
.label { .label {
flex: 1; flex: 1;
line-height: 60px; line-height: 60upx;
font-size: 38px; font-size: 38upx;
color: #555; color: #555;
text-align: left; text-align: left;
} }
.input { .input {
flex: 1; flex: 1;
height: 60px; height: 60upx;
font-size: 38px; font-size: 38upx;
align-items: center; align-items: center;
} }
.button-view { .button-view {
width: 750px; width: 750upx;
margin-top: 50px; margin-top: 50upx;
padding: 0 20px; padding: 0 20upx;
box-sizing: border-box; box-sizing: border-box;
flex-direction: column; flex-direction: column;
} }
button { button {
width: 710px; width: 710upx;
height: 80px; height: 80upx;
line-height: 80px; line-height: 80upx;
text-align: center; text-align: center;
font-size: 38px; font-size: 38upx;
} }
button.login { button.login {
...@@ -348,11 +348,11 @@ button.login { ...@@ -348,11 +348,11 @@ button.login {
} }
button.register { button.register {
margin-top: 30px; margin-top: 30upx;
color: #FF80AB; color: #FF80AB;
background-color: #fff; background-color: #fff;
border-color: #FF80AB; border-color: #FF80AB;
border-width: 2px; border-width: 2upx;
} }
.register.hover, .register.hover,
...@@ -365,28 +365,28 @@ button.register { ...@@ -365,28 +365,28 @@ button.register {
/* 详情页面 */ /* 详情页面 */
.detail-btn-view { .detail-btn-view {
width: 750px; width: 750upx;
position: fixed; position: fixed;
bottom: 75px; bottom: 75upx;
font-size: 28px; font-size: 28upx;
justify-content: space-between; justify-content: space-between;
} }
.detail-btn-view view { .detail-btn-view view {
opacity: 0.75; opacity: 0.75;
height: 80px; height: 80upx;
border-radius: 80px; border-radius: 80upx;
width: 80px; width: 80upx;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
line-height: 80px; line-height: 80upx;
margin: 0 30px; margin: 0 30upx;
font-family: texticons; font-family: texticons;
background: #eee; background: #eee;
color: #555; color: #555;
} }
.detail-btn-view view text{ .detail-btn-view view text{
margin-left: 10px; margin-left: 10upx;
} }
.detail-btn-view .download:before { .detail-btn-view .download:before {
content: '\e617'; content: '\e617';
......
examples/image-template/manifest.json
浏览文件 @ 8af25105
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
"name" : "image", "name" : "image",
"appid" : "__UNI__D5C0215", "appid" : "__UNI__D5C0215",
"description" : "图片App模版", "description" : "图片App模版",
"transformPx" : false,
"icons" : [ "icons" : [
{ {
"sizes" : "分辨率，192x192", "sizes" : "分辨率，192x192",
......
examples/image-template/pages/detail/detail.vue
浏览文件 @ 8af25105
...@@ -253,7 +253,7 @@ ...@@ -253,7 +253,7 @@
swiper { swiper {
flex: 1; flex: 1;
width: 750px; width: 750upx;
background-color: #000; background-color: #000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -265,7 +265,7 @@ ...@@ -265,7 +265,7 @@
} }
image { image {
width: 750px; width: 750upx;
height: 1125px; height: 1125upx;
} }
</style> </style>
examples/image-template/pages/hot/hot.vue
浏览文件 @ 8af25105
<template> <template>
<view class="index"> <view class="index">
<block v-for="(list, index) in lists" :key="index"> <block v-for="(list, index) in lists" :key="index">
<div class="row"> <view class="row">
<div class="card card-list2" v-for="(item,key) in list" @click="goDetail(item)" :key="key"> <view class="card card-list2" v-for="(item,key) in list" @click="goDetail(item)" :key="key">
<image class="card-img card-list2-img" :src="item.img_src"></image> <image class="card-img card-list2-img" :src="item.img_src"></image>
<div class="card-num-view card-list2-num-view"> <view class="card-num-view card-list2-num-view">
<text class="card-num card-list2-num">{{item.img_num}}P</text> <text class="card-num card-list2-num">{{item.img_num}}P</text>
</div> </view>
<div class="card-bottm row"> <view class="card-bottm row">
<div class="car-title-view row"> <view class="car-title-view row">
<text class="card-title card-list2-title">{{item.title}}</text> <text class="card-title card-list2-title">{{item.title}}</text>
</div> </view>
<view @click.stop="share(item)" class="card-share-view"></view> <view @click.stop="share(item)" class="card-share-view"></view>
</div> </view>
</div> </view>
</div> </view>
</block> </block>
<text class="loadMore">加载中...</text> <text class="loadMore">加载中...</text>
</view> </view>
......
examples/image-template/pages/list/list.vue
浏览文件 @ 8af25105
<template> <template>
<view class="index"> <view class="index">
<block v-for="(list, index) in lists" :key="index"> <block v-for="(list, index) in lists" :key="index">
<div class="row"> <view class="row">
<div class="card card-list2" v-for="(item,key) in list" @click="goDetail(item)" :key="key"> <view class="card card-list2" v-for="(item,key) in list" @click="goDetail(item)" :key="key">
<image class="card-img card-list2-img" :src="item.img_src"></image> <image class="card-img card-list2-img" :src="item.img_src"></image>
<div class="card-num-view card-list2-num-view"> <view class="card-num-view card-list2-num-view">
<text class="card-num card-list2-num">{{item.img_num}}P</text> <text class="card-num card-list2-num">{{item.img_num}}P</text>
</div> </view>
<div class="card-bottm row"> <view class="card-bottm row">
<div class="car-title-view row"> <view class="car-title-view row">
<text class="card-title card-list2-title">{{item.title}}</text> <text class="card-title card-list2-title">{{item.title}}</text>
</div> </view>
<view @click.stop="share(item)" class="card-share-view"></view> <view @click.stop="share(item)" class="card-share-view"></view>
</div> </view>
</div> </view>
</div> </view>
</block> </block>
<text class="loadMore">{{loadMoreText}}</text> <text class="loadMore">{{loadMoreText}}</text>
</view> </view>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或