zhangqi
/
circulation_ancientCoins_new
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页样式调整

master
kuaileWu 2 years ago
parent
cc9ec46725
commit
1d55fbd538
6 changed files with 34 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      components/tabbar.vue
  2. 12
      pages/index/index.vue
  3. 1
      static/images/frontend/tabbar_index.svg
  4. 1
      static/images/frontend/tabbar_index_active.svg
  5. 1
      static/images/frontend/tabbar_user.svg
  6. 1
      static/images/frontend/tabbar_user_active.svg

31
components/tabbar.vue
View File

@ -68,26 +68,31 @@
</script>
<style>
.tabbar_item{
width: 33.3333333%;
width: 50%;
height: 112rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10rpx;
text-align: center;
}
.tabbar_item:first-of-type{
justify-content: flex-start;
}
.tabbar_item:last-of-type{
justify-content: flex-end;
}
.tabbar_item_wrap{
position: fixed;
bottom: 0rpx;
left: 0rpx;
right: 0rpx;
width: 664rpx;
width: 404rpx;
height: 119.43925233644859rpx;
background-color: #ffffff;
display: flex;
box-sizing: border-box;
padding-left: 43rpx;
padding-right: 43rpx;
padding-left: 173rpx;
padding-right: 173rpx;
justify-content: space-between;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
@ -97,12 +102,12 @@
box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181,181,181,0.13);
}
.tabbar_item01 image{
width: 50rpx;
height: 50rpx;
width: 60rpx;
height: 60rpx;
}
.tabbar_item02 image{
width: 50rpx;
height: 50rpx;
width: 60rpx;
height: 60rpx;
}
.tabbar_item05{
position: relative;
@ -114,12 +119,12 @@
top: -50rpx;
}
.tabbar_item03 image{
width: 50rpx;
height: 50rpx;
width: 60rpx;
height: 60rpx;
}
.tabbar_item04 image{
width: 50rpx;
height: 50rpx;
width: 60rpx;
height: 60rpx;
}
.tabbarNone{
color: #888D9C;

12
pages/index/index.vue
View File

@ -84,7 +84,7 @@
<view class="block visit-wrapper ">
<view class="header flex">
<view class="title-wrapper flex">
<view class="title-wrapper flex booklist">
<view class="title">
最近预约
</view>
@ -131,10 +131,14 @@
</view>
</view>
</view>
<tabbar current="1"></tabbar>
</view>
</template>
<script>
import tabbar from '@/components/tabbar.vue';
export default {
data() {
return {
@ -146,6 +150,9 @@
title:'李静医生预约就诊'
});
},
components:{
tabbar:tabbar
},
methods: {
}
}
@ -229,6 +236,9 @@
border-radius: 8rpx 0rpx 0rpx 8rpx;
background: linear-gradient( 98deg, #53C184 0%, #5CD378 100%);
}
&.booklist .title{
margin-bottom: 0rpx;
}
img{
width: 48rpx;
height: 42rpx;

1
static/images/frontend/tabbar_index.svg
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" width="60px" height="60px" viewBox="0 0 60.0 60.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="i0"><path d="M2248,0 L2248,2863 L0,2863 L0,0 L2248,0 Z"></path></clipPath><clipPath id="i1"><path d="M38,0 C41.3137085,-6.08718376e-16 44,2.6862915 44,6 L44,32 C44,35.3137085 41.3137085,38 38,38 L6,38 C2.6862915,38 2.02906125e-16,35.3137085 0,32 L0,6 C-4.05812251e-16,2.6862915 2.6862915,4.05812251e-16 6,0 L38,0 Z"></path></clipPath><clipPath id="i2"><path d="M22.6713213,0.667361779 C23.5703441,1.54952135 23.5651323,2.9757217 22.6582919,3.85279679 L10.7104092,15.4022232 C10.2782631,15.8211979 9.69360015,16.056118 9.08435058,16.0555815 L9.01138641,16.0555815 C8.37787842,16.035458 7.78061488,15.7624978 7.35926915,15.3005333 L0.584024849,7.87208868 C-0.262880689,6.94162642 -0.179493067,5.51796832 0.774252862,4.69173817 C1.72799879,3.86550802 3.18728218,3.94685991 4.03418771,4.87732217 L9.18858511,10.5287364 L19.4061747,0.652108299 C20.3130151,-0.222424536 21.7749043,-0.217340043 22.6713213,0.667361779 Z"></path></clipPath><clipPath id="i3"><path d="M2.5,0 C3.87979684,0 5,0.975024998 5,2.17600037 L5,7.5889855 C5,8.79241686 3.87979684,9.76744186 2.5,9.76744186 C1.12020316,9.76744186 0,8.79241686 0,7.59144149 L0,2.17600037 C0,0.975024998 1.12020316,0 2.5,0 Z"></path></clipPath><clipPath id="i4"><path d="M9,-4 L9,13.7674419 L-4,13.7674419 L-4,-4 L9,-4 Z M2.5,0 C1.12020316,0 0,0.975024998 0,2.17600037 L0,7.59144149 C0,8.79241686 1.12020316,9.76744186 2.5,9.76744186 C3.87979684,9.76744186 5,8.79241686 5,7.5889855 L5,2.17600037 C5,0.975024998 3.87979684,0 2.5,0 Z"></path></clipPath><clipPath id="i5"><path d="M2.5,0 C3.87979684,0 5,0.975024998 5,2.17600037 L5,7.5889855 C5,8.79241686 3.87979684,9.76744186 2.5,9.76744186 C1.12020316,9.76744186 0,8.79241686 0,7.59144149 L0,2.17600037 C0,0.975024998 1.12020316,0 2.5,0 Z"></path></clipPath><clipPath id="i6"><path d="M9,-4 L9,13.7674419 L-4,13.7674419 L-4,-4 L9,-4 Z M2.5,0 C1.12020316,0 0,0.975024998 0,2.17600037 L0,7.59144149 C0,8.79241686 1.12020316,9.76744186 2.5,9.76744186 C3.87979684,9.76744186 5,8.79241686 5,7.5889855 L5,2.17600037 C5,0.975024998 3.87979684,0 2.5,0 Z"></path></clipPath></defs><g transform="translate(-247.0 -305.0)"><g clip-path="url(#i0)"><g transform="translate(247.0 305.0)"><g transform="translate(8.0 13.0)"><g clip-path="url(#i1)"><path d="M6,0 L38,0 C41.3137085,-6.08718376e-16 44,2.6862915 44,6 L44,32 C44,35.3137085 41.3137085,38 38,38 L6,38 C2.6862915,38 2.02906125e-16,35.3137085 0,32 L0,6 C-4.05812251e-16,2.6862915 2.6862915,4.05812251e-16 6,0 Z" stroke="#AEB0B8" stroke-width="8.88" fill="none" stroke-miterlimit="5"></path></g></g><g transform="translate(18.837473522810157 25.261002119606424)"><g clip-path="url(#i2)"><polygon points="1.99569215e-16,4.41194494e-16 23.3420226,4.41194494e-16 23.3420226,16.0555824 1.99569215e-16,16.0555824 1.99569215e-16,4.41194494e-16" stroke="none" fill="#AEB0B8"></polygon></g></g><g transform="translate(18.0 8.999999999999998)"><g clip-path="url(#i3)"><polygon points="0,0 5,0 5,9.76744186 0,9.76744186 0,0" stroke="none" fill="#AEB0B8"></polygon></g><g clip-path="url(#i4)"><path d="M2.5,9.76744186 C1.12020316,9.76744186 0,8.79241686 0,7.59144149 L0,2.17600037 C0,0.975024998 1.12020316,0 2.5,0 C3.87979684,0 5,0.975024998 5,2.17600037 L5,7.5889855 C5,8.79241686 3.87979684,9.76744186 2.5,9.76744186 Z" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-miterlimit="5"></path></g><g transform="translate(19.0 0.0)"><g clip-path="url(#i5)"><polygon points="0,0 5,0 5,9.76744186 0,9.76744186 0,0" stroke="none" fill="#AEB0B8"></polygon></g><g clip-path="url(#i6)"><path d="M2.5,9.76744186 C1.12020316,9.76744186 0,8.79241686 0,7.59144149 L0,2.17600037 C0,0.975024998 1.12020316,0 2.5,0 C3.87979684,0 5,0.975024998 5,2.17600037 L5,7.5889855 C5,8.79241686 3.87979684,9.76744186 2.5,9.76744186 Z" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-miterlimit="5"></path></g></g></g></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

1
static/images/frontend/tabbar_index_active.svg
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" width="60px" height="61px" viewBox="0 0 60.0 61.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="i0"><path d="M2248,0 L2248,2863 L0,2863 L0,0 L2248,0 Z"></path></clipPath><clipPath id="i1"><path d="M38,0 C41.3137085,-1.4968968e-15 44,2.6862915 44,6 L44,32.179669 C44,35.4933775 41.3137085,38.179669 38,38.179669 L6,38.179669 C2.6862915,38.179669 5.05188001e-17,35.4933775 0,32.179669 L0,6 C-1.29399067e-15,2.6862915 2.6862915,-4.82366169e-16 6,0 L38,0 Z"></path></clipPath><clipPath id="i2"><path d="M22.6713213,0.670517153 C23.5703441,1.5568477 23.5651323,2.98979131 22.6582919,3.87101332 L10.7104092,15.4750469 C10.2782631,15.8960026 9.69360015,16.1320335 9.08435058,16.1314944 L9.01138641,16.1314944 C8.37787842,16.1112758 7.78061488,15.837025 7.35926915,15.3728762 L0.584024849,7.90930896 C-0.262880689,6.97444735 -0.179493067,5.544058 0.774252862,4.71392133 C1.72799879,3.88378465 3.18728218,3.96552119 4.03418771,4.9003828 L9.18858511,10.5785177 L19.4061747,0.655191553 C20.3130151,-0.223476189 21.7749043,-0.218367655 22.6713213,0.670517153 Z"></path></clipPath><clipPath id="i3"><path d="M2.5,0 C3.87979684,0 5,0.979635046 5,2.18628879 L5,7.62486723 C5,8.83398857 3.87979684,9.81362362 2.5,9.81362362 C1.12020316,9.81362362 0,8.83398857 0,7.62733483 L0,2.18628879 C0,0.979635046 1.12020316,0 2.5,0 Z"></path></clipPath><clipPath id="i4"><path d="M9,-4 L9,13.8136236 L-4,13.8136236 L-4,-4 L9,-4 Z M2.5,0 C1.12020316,0 0,0.979635046 0,2.18628879 L0,7.62733483 C0,8.83398857 1.12020316,9.81362362 2.5,9.81362362 C3.87979684,9.81362362 5,8.83398857 5,7.62486723 L5,2.18628879 C5,0.979635046 3.87979684,0 2.5,0 Z"></path></clipPath><clipPath id="i5"><path d="M2.5,0 C3.87979684,0 5,0.979635046 5,2.18628879 L5,7.62486723 C5,8.83398857 3.87979684,9.81362362 2.5,9.81362362 C1.12020316,9.81362362 0,8.83398857 0,7.62733483 L0,2.18628879 C0,0.979635046 1.12020316,0 2.5,0 Z"></path></clipPath><clipPath id="i6"><path d="M9,-4 L9,13.8136236 L-4,13.8136236 L-4,-4 L9,-4 Z M2.5,0 C1.12020316,0 0,0.979635046 0,2.18628879 L0,7.62733483 C0,8.83398857 1.12020316,9.81362362 2.5,9.81362362 C3.87979684,9.81362362 5,8.83398857 5,7.62486723 L5,2.18628879 C5,0.979635046 3.87979684,0 2.5,0 Z"></path></clipPath></defs><g transform="translate(-133.0 -305.0)"><g clip-path="url(#i0)"><g transform="translate(133.0 305.0)"><g transform="translate(8.0 13.061465721040193)"><g clip-path="url(#i1)"><polygon points="0,0 44,0 44,38.179669 0,38.179669 0,0" stroke="none" fill="#5AD079"></polygon></g></g><g transform="translate(18.837473522810157 25.380439481874063)"><g clip-path="url(#i2)"><polygon points="1.99569215e-16,4.77457014e-16 23.3420226,4.77457014e-16 23.3420226,16.1314953 1.99569215e-16,16.1314953 1.99569215e-16,4.77457014e-16" stroke="none" fill="#FFFFFF"></polygon></g></g><g transform="translate(18.0 9.042553191489361)"><g clip-path="url(#i3)"><polygon points="0,0 5,0 5,9.81362362 0,9.81362362 0,0" stroke="none" fill="#5AD079"></polygon></g><g clip-path="url(#i4)"><path d="M2.5,9.81362362 C1.12020316,9.81362362 0,8.83398857 0,7.62733483 L0,2.18628879 C0,0.979635046 1.12020316,0 2.5,0 C3.87979684,0 5,0.979635046 5,2.18628879 L5,7.62486723 C5,8.83398857 3.87979684,9.81362362 2.5,9.81362362 Z" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-miterlimit="5"></path></g><g transform="translate(19.0 0.0)"><g clip-path="url(#i5)"><polygon points="0,0 5,0 5,9.81362362 0,9.81362362 0,0" stroke="none" fill="#5AD079"></polygon></g><g clip-path="url(#i6)"><path d="M2.5,9.81362362 C1.12020316,9.81362362 0,8.83398857 0,7.62733483 L0,2.18628879 C0,0.979635046 1.12020316,0 2.5,0 C3.87979684,0 5,0.979635046 5,2.18628879 L5,7.62486723 C5,8.83398857 3.87979684,9.81362362 2.5,9.81362362 Z" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-miterlimit="5"></path></g></g></g></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

1
static/images/frontend/tabbar_user.svg
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" width="60px" height="60px" viewBox="0 0 60.0 60.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="i0"><path d="M2248,0 L2248,2863 L0,2863 L0,0 L2248,0 Z"></path></clipPath></defs><g transform="translate(-247.0 -419.0)"><g clip-path="url(#i0)"><g transform="translate(247.0 419.0)"><g transform="translate(7.777777777777779 7.777777777777779)"><g transform="translate(10.0 2.2222222222222214)"><path d="M12.2222222,24.4444444 C18.9723692,24.4444444 24.4444444,18.9723692 24.4444444,12.2222222 C24.4444444,5.47207528 18.9723692,0 12.2222222,0 C5.47207528,0 0,5.47207528 0,12.2222222 C0,18.9723692 5.47207528,24.4444444 12.2222222,24.4444444 Z" stroke="#AEB0B7" stroke-width="4.44444444" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g><g transform="translate(2.2222222222222214 33.33333333333334)"><path d="M0,8.88888889 C4.91318773,3.43333902 12.053153,0 20,0 C27.946847,0 35.0868123,3.43333902 40,8.88888889" stroke="#AEB0B7" stroke-width="4.44444444" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g></g></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
static/images/frontend/tabbar_user_active.svg
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" width="60px" height="60px" viewBox="0 0 60.0 60.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="i0"><path d="M2248,0 L2248,2863 L0,2863 L0,0 L2248,0 Z"></path></clipPath><clipPath id="i1"><path d="M11.1111111,0 C17.2476083,0 22.2222222,4.97461389 22.2222222,11.1111111 C22.2222222,17.2476083 17.2476083,22.2222222 11.1111111,22.2222222 C4.97461389,22.2222222 0,17.2476083 0,11.1111111 C0,4.97461389 4.97461389,0 11.1111111,0 Z"></path></clipPath></defs><g transform="translate(-133.0 -419.0)"><g clip-path="url(#i0)"><g transform="translate(133.0 419.0)"><g transform="translate(7.777777777777779 7.777777777777779)"><g transform="translate(11.11111111111111 3.333333333333332)"><g clip-path="url(#i1)"><polygon points="0,0 22.2222222,0 22.2222222,22.2222222 0,22.2222222 0,0" stroke="none" fill="#5AD079"></polygon></g></g><g transform="translate(10.0 2.2222222222222214)"><path d="M12.2222222,24.4444444 C18.9723692,24.4444444 24.4444444,18.9723692 24.4444444,12.2222222 C24.4444444,5.47207528 18.9723692,0 12.2222222,0 C5.47207528,0 0,5.47207528 0,12.2222222 C0,18.9723692 5.47207528,24.4444444 12.2222222,24.4444444 Z" stroke="#5AD079" stroke-width="4.44444444" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g><g transform="translate(2.2222222222222214 33.33333333333334)"><path d="M0,8.88888889 C4.91318773,3.43333902 12.053153,0 20,0 C27.946847,0 35.0868123,3.43333902 40,8.88888889" stroke="#5AD079" stroke-width="4.44444444" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g></g></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

Write Preview
Loading…
Cancel
Save