Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
75db1ba3 1 parent 45477ee6

fix 样式调整，新增缺省幼儿园图片

Inline Side-by-side
Showing 4 changed files with 47 additions and 20 deletions
1 <template> 1 <template>
2 <div class="wrapper"> 2 <div class="wrapper">
3 - <div style="width: 4rem; height: 4rem; border-radius: 50%; background-color: #FFF; position: absolute; 3 + <div class="w-image">
4 - left: -2rem;"> 4 + <van-image v-if="avatar" class="van-hairline--surround" round width="3.8rem" height="3.8rem" lazy-load :src="avatar" style="position: absolute; left: 0.1rem; top: 0.1rem;" >
5 - <van-image 5 + <template v-slot:error>加载失败</template>
6 - class="van-hairline--surround" 6 + </van-image>
7 - round 7 + <van-image v-else class="van-hairline--surround" round width="3.8rem" height="3.8rem" lazy-load :src="icon_avatar" style="position: absolute; left: 0.1rem; top: 0.1rem;" >
8 - width="3.8rem"
9 - height="3.8rem"
10 - lazy-load
11 - :src="avatar"
12 - style="position: absolute; left: 0.1rem; top: 0.1rem;"
13 - >
14 <template v-slot:error>加载失败</template> 8 <template v-slot:error>加载失败</template>
15 </van-image> 9 </van-image>
16 </div> 10 </div>
...@@ -24,6 +18,8 @@ ...@@ -24,6 +18,8 @@
24 </template> 18 </template>
25 19
26 <script setup> 20 <script setup>
21 +import icon_avatar from '@images/que-logo@2x.png'
22 +
27 import { ref, reactive, onMounted } from 'vue' 23 import { ref, reactive, onMounted } from 'vue'
28 const props = defineProps({ 24 const props = defineProps({
29 avatar: String 25 avatar: String
...@@ -63,6 +59,14 @@ export default { ...@@ -63,6 +59,14 @@ export default {
63 margin-left: 4rem; 59 margin-left: 4rem;
64 height: 4rem; 60 height: 4rem;
65 box-shadow: 0px 0px 4px 0px rgba(73, 156, 255, 0.2); 61 box-shadow: 0px 0px 4px 0px rgba(73, 156, 255, 0.2);
62 + .w-image {
63 + width: 4rem;
64 + height: 4rem;
65 + border-radius: 50%;
66 + background-color: #FFF;
67 + position: absolute;
68 + left: -2rem;
69 + }
66 .text-wrapper { 70 .text-wrapper {
67 height: 100%; 71 height: 100%;
68 text-align: left; 72 text-align: left;
......
...@@ -19,21 +19,33 @@ ...@@ -19,21 +19,33 @@
19 <div class="summary"> 19 <div class="summary">
20 <div class="ding left"></div> 20 <div class="ding left"></div>
21 <div class="wrapper"> 21 <div class="wrapper">
22 - <div class="content-box" style=""> 22 + <div class="content-box">
23 <van-row class="van-hairline--bottom"> 23 <van-row class="van-hairline--bottom">
24 <van-col span="12" class="van-hairline--right"> 24 <van-col span="12" class="van-hairline--right">
25 - <div class="text-box"><span class="text">视频上传</span>&nbsp;{{ kgInfo.mission_num }}<span style="color: #888888;">/{{ kgInfo.mission_target }}</span></div> 25 + <div class="text-box">
26 + <span class="text">视频上传</span>
27 + <span class="number">&nbsp;{{ kgInfo.mission_num }}<span style="color: #888888;">/{{ kgInfo.mission_target }}</span></span>
28 + </div>
26 </van-col> 29 </van-col>
27 <van-col span="12"> 30 <van-col span="12">
28 - <div class="text-box"><span class="text">作品总数</span>&nbsp;{{ kgInfo.prod_num }}</div> 31 + <div class="text-box">
32 + <span class="text">作品总数</span>
33 + <span class="number">&nbsp;{{ kgInfo.prod_num }}</span>
34 + </div>
29 </van-col> 35 </van-col>
30 </van-row> 36 </van-row>
31 <van-row> 37 <van-row>
32 <van-col span="12" class="van-hairline--right"> 38 <van-col span="12" class="van-hairline--right">
33 - <div class="text-box"><span class="text">捐书金额</span>&nbsp;¥&nbsp;{{ kgInfo.donate_amt }}</div> 39 + <div class="text-box">
40 + <span class="text">捐书金额</span>
41 + <span class="number">&nbsp;¥&nbsp;{{ kgInfo.donate_amt }}</span>
42 + </div>
34 </van-col> 43 </van-col>
35 <van-col span="12"> 44 <van-col span="12">
36 - <div class="text-box"><span class="text">参与人数</span>&nbsp;{{ kgInfo.perf_num }}</div> 45 + <div class="text-box">
46 + <span class="text">参与人数</span>
47 + <span class="number">&nbsp;{{ kgInfo.perf_num }}</span>
48 + </div>
37 </van-col> 49 </van-col>
38 </van-row> 50 </van-row>
39 </div> 51 </div>
...@@ -63,7 +75,7 @@ ...@@ -63,7 +75,7 @@
63 </template> 75 </template>
64 76
65 <script setup> 77 <script setup>
66 -import icon_avatar from '@images/que-touxiang@2x.png' 78 +import icon_avatar from '@images/que-logo@2x.png'
67 79
68 import icon_book from '@images/shu@2x.png' 80 import icon_book from '@images/shu@2x.png'
69 import BookCard from '@/components/BookCard/index.vue' 81 import BookCard from '@/components/BookCard/index.vue'
...@@ -152,9 +164,18 @@ export default { ...@@ -152,9 +164,18 @@ export default {
152 text-align: center; 164 text-align: center;
153 color: #713610; 165 color: #713610;
154 .text-box { 166 .text-box {
155 - padding: 1.5rem 1rem; 167 + padding: 1.5rem 2rem;
168 + overflow: auto;
156 .text { 169 .text {
157 - color: #222222; border-bottom: 2px solid #F9D95C; font-size: 0.85rem; 170 + color: #222222;
171 + border-bottom: 2px solid #F9D95C;
172 + font-size: 0.85rem;
173 + display: inline-block;
174 + float: left;
175 + }
176 + .number {
177 + display: inline-block;
178 + float: right;
158 } 179 }
159 } 180 }
160 } 181 }
......
1 <template> 1 <template>
2 <div style="background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); padding: 1rem; text-align: center;"> 2 <div style="background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); padding: 1rem; text-align: center;">
3 - <van-image round width="4rem" height="4rem" :src="myKgInfo.logo" /> 3 + <van-image v-if="myKgInfo.logo" round width="4rem" height="4rem" :src="myKgInfo.logo" />
4 + <van-image v-else round width="4rem" height="4rem" :src="icon_avatar" />
4 <p style="margin-top: 1rem; font-size: 1.05rem; font-weight: bold;">{{ myKgInfo.name }}</p> 5 <p style="margin-top: 1rem; font-size: 1.05rem; font-weight: bold;">{{ myKgInfo.name }}</p>
5 </div> 6 </div>
6 <template v-for="(item, key) in itemList" :key="key"> 7 <template v-for="(item, key) in itemList" :key="key">
...@@ -20,6 +21,7 @@ ...@@ -20,6 +21,7 @@
20 21
21 <script setup> 22 <script setup>
22 import ShortcutFixed from '@/components/ShortcutFixed/index.vue' 23 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
24 +import icon_avatar from '@images/que-logo@2x.png'
23 25
24 import { ref, reactive, onMounted } from 'vue' 26 import { ref, reactive, onMounted } from 'vue'
25 import { useRoute, useRouter } from 'vue-router' 27 import { useRoute, useRouter } from 'vue-router'
......