Showing
2 changed files
with
52 additions
and
53 deletions
| 1 | <template> | 1 | <template> |
| 2 | <div class="wrapper"> | 2 | <div class="wrapper"> |
| 3 | <div class="w-image"> | 3 | <div class="w-image"> |
| 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;" > | 4 | + <van-image class="van-hairline--surround avatar" round lazy-load :src="avatar ? avatar : icon_avatar"> |
| 5 | - <template v-slot:error>加载失败</template> | 5 | + <template #error>加载失败</template> |
| 6 | - </van-image> | ||
| 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 | - <template v-slot:error>加载失败</template> | ||
| 9 | </van-image> | 6 | </van-image> |
| 10 | </div> | 7 | </div> |
| 11 | - <div class="text-wrapper" @click="handle"> | 8 | + <div class="text-wrapper"> |
| 12 | - <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);"> | 9 | + <van-row align="center" justify="center" class="center-content"> |
| 13 | - <van-col span="20" style="color: #713610;"><slot></slot></van-col> | 10 | + <van-col span="20" style="color: #713610;"> |
| 14 | - <van-col span="4" style="text-align: center;"><van-icon name="arrow" color="#c5c5c5" size="1.25rem" /></van-col> | 11 | + <slot /> |
| 12 | + </van-col> | ||
| 13 | + <van-col span="4" style="text-align: center;" @click="handle"> | ||
| 14 | + <van-icon name="arrow" color="#c5c5c5" size="1.25rem" /> | ||
| 15 | + </van-col> | ||
| 15 | </van-row> | 16 | </van-row> |
| 16 | </div> | 17 | </div> |
| 17 | </div> | 18 | </div> |
| ... | @@ -20,58 +21,54 @@ | ... | @@ -20,58 +21,54 @@ |
| 20 | <script setup> | 21 | <script setup> |
| 21 | import icon_avatar from '@images/que-logo@2x.png' | 22 | import icon_avatar from '@images/que-logo@2x.png' |
| 22 | 23 | ||
| 23 | -import { ref, reactive, onMounted } from 'vue' | 24 | +// eslint-disable-next-line no-unused-vars |
| 24 | const props = defineProps({ | 25 | const props = defineProps({ |
| 25 | - avatar: String | 26 | + avatar: { |
| 27 | + type: String, | ||
| 28 | + default: '' | ||
| 29 | + } | ||
| 26 | }) | 30 | }) |
| 27 | -const emit = defineEmits(['on-click']); | 31 | +const emit = defineEmits(['on-icon-click']); |
| 28 | const handle = () => { | 32 | const handle = () => { |
| 29 | - emit('on-click', '') | 33 | + emit('on-icon-click', '') |
| 30 | -} | ||
| 31 | - | ||
| 32 | - onMounted(() => { | ||
| 33 | - | ||
| 34 | - }) | ||
| 35 | -</script> | ||
| 36 | - | ||
| 37 | -<script> | ||
| 38 | -export default { | ||
| 39 | - data () { | ||
| 40 | - return { | ||
| 41 | - | ||
| 42 | - } | ||
| 43 | - }, | ||
| 44 | - mounted () { | ||
| 45 | - | ||
| 46 | - }, | ||
| 47 | - methods: { | ||
| 48 | - | ||
| 49 | - } | ||
| 50 | } | 34 | } |
| 51 | </script> | 35 | </script> |
| 52 | 36 | ||
| 53 | <style lang="less" scoped> | 37 | <style lang="less" scoped> |
| 54 | - .wrapper { | 38 | +.wrapper { |
| 55 | - position: relative; | 39 | + position: relative; |
| 56 | - background-color: #fff; | 40 | + background-color: #fff; |
| 57 | - margin: 2rem; | 41 | + margin: 2rem; |
| 58 | - margin-right: 0; | 42 | + margin-right: 0; |
| 59 | - margin-left: 4rem; | 43 | + margin-left: 4rem; |
| 44 | + height: 4rem; | ||
| 45 | + box-shadow: 0px 0px 4px 0px rgba(73, 156, 255, 0.2); | ||
| 46 | + | ||
| 47 | + .w-image { | ||
| 48 | + width: 4rem; | ||
| 60 | height: 4rem; | 49 | height: 4rem; |
| 61 | - box-shadow: 0px 0px 4px 0px rgba(73, 156, 255, 0.2); | 50 | + border-radius: 50%; |
| 62 | - .w-image { | 51 | + background-color: #FFF; |
| 63 | - width: 4rem; | 52 | + position: absolute; |
| 64 | - height: 4rem; | 53 | + left: -2rem; |
| 65 | - border-radius: 50%; | 54 | + |
| 66 | - background-color: #FFF; | 55 | + .avatar { |
| 67 | position: absolute; | 56 | position: absolute; |
| 68 | - left: -2rem; | 57 | + left: 0.1rem; |
| 58 | + top: 0.1rem; | ||
| 59 | + width: 3.8rem; | ||
| 60 | + height: 3.8rem; | ||
| 69 | } | 61 | } |
| 70 | - .text-wrapper { | 62 | + } |
| 71 | - height: 100%; | 63 | + |
| 72 | - text-align: left; | 64 | + .text-wrapper { |
| 73 | - // line-height: 4rem; | 65 | + height: 100%; |
| 74 | - padding-left: 3rem; | 66 | + text-align: left; |
| 67 | + // line-height: 4rem; | ||
| 68 | + padding-left: 3rem; | ||
| 69 | + .center-content{ | ||
| 70 | + position: relative; top: 50%; transform: translateY(-50%); | ||
| 75 | } | 71 | } |
| 76 | } | 72 | } |
| 73 | +} | ||
| 77 | </style> | 74 | </style> | ... | ... |
| ... | @@ -5,9 +5,11 @@ | ... | @@ -5,9 +5,11 @@ |
| 5 | <template v-for="(item, key) in schoolList" :key="key"> | 5 | <template v-for="(item, key) in schoolList" :key="key"> |
| 6 | <right-side-list | 6 | <right-side-list |
| 7 | :avatar="item.logo" | 7 | :avatar="item.logo" |
| 8 | - @on-click="go('/client/chooseBook', { kg_id: item.id })" | 8 | + @on-icon-click="go('/client/chooseBook', { kg_id: item.id })" |
| 9 | > | 9 | > |
| 10 | - {{ item.name }} | 10 | + <span @click="go('/client/chooseBook', { kg_id: item.id })"> |
| 11 | + {{ item.name }} | ||
| 12 | + </span> | ||
| 11 | </right-side-list> | 13 | </right-side-list> |
| 12 | </template> | 14 | </template> |
| 13 | </div> | 15 | </div> | ... | ... |
-
Please register or login to post a comment