111

pages/my/my.vue

@@ -35,42 +35,72 @@
         <view class="titlename">我的临床病例库</view>
         <view class="cell" @click="goDoctor(userInfo.doctor_id,userInfo.user_name)" v-if="numInfo.article_num>0">
            <view class="left">
-             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
+            <up--image
+              :src="myFile"
+              width="34rpx"
+              height="34rpx"
+              
+            ></up--image>
             <view class="title">我的病例库</view>
            </view>
             <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
         </view>
          <view class="cell" @click="goCert">
            <view class="left">
-             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
+            <up--image
+              :src="myDownload"
+              width="42rpx"
+              height="42rpx"
+              
+            ></up--image>
             <view class="title">临床病例库收录证书下载</view>
            </view>
             <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
         </view>
          <view class="cell" @click="goHospital(userInfo.hospital_id,userInfo.hospital_name)" v-if="hospitalInfo.video_read_num>0 || hospitalInfo.article_read_num>0">
            <view class="left">
-             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
+             <up--image
+               :src="myHospital"
+               width="39rpx"
+               height="39rpx"
+               
+             ></up--image>
             <view class="title">{{userInfo.hospital_name}}临床病例库</view>
            </view>
             <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
         </view>
          <view class="cell" @click="mySpecial">
            <view class="left">
-             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
+            <up--image
+              :src="myTalk"
+              width="39rpx"
+              height="39rpx"
+              
+            ></up--image>
             <view class="title">我的病例交流</view>
            </view>
             <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
         </view>
          <view class="cell" @click="goJoin">
            <view class="left">
-             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
+            <up--image
+              :src="myJoin"
+              width="39rpx"
+              height="39rpx"
+              
+            ></up--image>
             <view class="title">我的参与互动</view>
            </view>
             <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
         </view>
         <view class="cell" @click="goCollect">
            <view class="left">
-             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
+            <up--image
+              :src="myCollect"
+              width="39rpx"
+              height="39rpx"
+              
+            ></up--image>
             <view class="title">浏览与收藏</view>
            </view>
             <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
@@ -88,6 +118,13 @@
 <script setup>
 import dNav from "@/components/backNav/backNav.vue";
 import headImg from "@/static/headImg.png";
+import myFile from "@/static/myFile.png";
+import myDownload from "@/static/myDownload.png";
+import myCollect from "@/static/myCollect.png";
+import myHospital from "@/static/myHospital.png";
+import myJoin from "@/static/myJoin.png";
+import myTalk from "@/static/myTalk.png";
+
 import { onLoad } from "@dcloudio/uni-app";
 import navTo  from "@/utils/navTo.js";
 import api from "@/api/api";
@@ -196,6 +233,10 @@ const goPublish=()=>{
      display: flex;
      justify-content: space-between;
      align-items: center;
+	   :deep(.u-image){
+		   margin-top: 9rpx;
+		   background: none!important;
+	   }
         .left{
              display: flex;
           justify-content: space-between;

unpackage/dist/dev/.sourcemap/mp-weixin/common/assets.js.map

@@ -1 +1 @@
-{"version":3,"file":"assets.js","sources":["static/video.png","static/sick.png","static/hospital.png","static/doctor.png","static/photo.png","static/add.png","static/videoicon.png","static/vote.png","static/switch.png","static/arrowright.png","static/headImg.png","static/cert.png","static/collectOn.png","static/collect.png","static/shang.png","static/chat.png","static/uploadImg.png","static/comment_icon.png","static/benren.png","static/caseIcon.png","static/default.png","static/group.png","static/ku.png","static/ku_on.png","static/group_on.png","static/talk.png","static/talk_on.png","static/logo.png"],"sourcesContent":["export default \"__VITE_ASSET__f55d1656__\"","export default \"__VITE_ASSET__b8c46462__\"","export default \"__VITE_ASSET__d413868a__\"","export default \"__VITE_ASSET__b35aa4a8__\"","export default \"__VITE_ASSET__fd0b1873__\"","export default \"__VITE_ASSET__7afdfa25__\"","export default \"__VITE_ASSET__f335dad1__\"","export default \"__VITE_ASSET__bc53d6e9__\"","export default \"__VITE_ASSET__34b6a406__\"","export default \"__VITE_ASSET__04d264d8__\"","export default \"__VITE_ASSET__2dc1225f__\"","export default \"__VITE_ASSET__968fe4e2__\"","export default \"__VITE_ASSET__60605a3f__\"","export default \"__VITE_ASSET__1b1db7a1__\"","export default \"__VITE_ASSET__0d05d4c1__\"","export default \"__VITE_ASSET__b055dcc3__\"","export default \"__VITE_ASSET__66769c53__\"","export default \"__VITE_ASSET__27070269__\"","export default \"__VITE_ASSET__beb38987__\"","export default \"__VITE_ASSET__3981e088__\"","export default \"__VITE_ASSET__f5b8f828__\"","export default \"__VITE_ASSET__df35ad17__\"","export default \"__VITE_ASSET__c0792a8a__\"","export default \"__VITE_ASSET__514334a4__\"","export default \"__VITE_ASSET__40793151__\"","export default \"__VITE_ASSET__977b04a2__\"","export default \"__VITE_ASSET__e6204d41__\"","export default \"__VITE_ASSET__8ef1dcc4__\""],"names":[],"mappings":";AAAA,MAAe,aAAA;ACAf,MAAe,UAAA;ACAf,MAAe,cAAA;ACAf,MAAe,YAAA;ACAf,MAAe,WAAA;ACAf,MAAe,SAAA;ACAf,MAAe,WAAA;ACAf,MAAe,UAAA;ACAf,MAAe,YAAA;ACAf,MAAe,gBAAA;ACAf,MAAe,UAAA;ACAf,MAAe,UAAA;ACAf,MAAe,eAAA;ACAf,MAAe,aAAA;ACAf,MAAe,WAAA;ACAf,MAAe,UAAA;ACAf,MAAe,YAAA;ACAf,MAAe,aAAA;ACAf,MAAe,UAAA;ACAf,MAAe,UAAA;ACAf,MAAe,MAAA;ACAf,MAAe,QAAA;ACAf,MAAe,KAAA;ACAf,MAAe,QAAA;ACAf,MAAe,WAAA;ACAf,MAAe,OAAA;ACAf,MAAe,UAAA;ACAf,MAAe,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"assets.js","sources":["static/video.png","static/sick.png","static/hospital.png","static/doctor.png","static/photo.png","static/add.png","static/videoicon.png","static/vote.png","static/switch.png","static/arrowright.png","static/headImg.png","static/cert.png","static/myFile.png","static/myDownload.png","static/myCollect.png","static/myHospital.png","static/myJoin.png","static/myTalk.png","static/collectOn.png","static/collect.png","static/shang.png","static/chat.png","static/uploadImg.png","static/comment_icon.png","static/benren.png","static/caseIcon.png","static/default.png","static/group.png","static/ku.png","static/ku_on.png","static/group_on.png","static/talk.png","static/talk_on.png","static/logo.png"],"sourcesContent":["export default \"__VITE_ASSET__f55d1656__\"","export default \"__VITE_ASSET__b8c46462__\"","export default \"__VITE_ASSET__d413868a__\"","export default \"__VITE_ASSET__b35aa4a8__\"","export default \"__VITE_ASSET__fd0b1873__\"","export default \"__VITE_ASSET__7afdfa25__\"","export default \"__VITE_ASSET__f335dad1__\"","export default \"__VITE_ASSET__bc53d6e9__\"","export default \"__VITE_ASSET__34b6a406__\"","export default \"__VITE_ASSET__04d264d8__\"","export default \"__VITE_ASSET__2dc1225f__\"","export default \"__VITE_ASSET__968fe4e2__\"","export default \"__VITE_ASSET__2a791e4d__\"","export default \"__VITE_ASSET__02d8e89c__\"","export default \"__VITE_ASSET__018fc400__\"","export default \"__VITE_ASSET__f708625e__\"","export default \"__VITE_ASSET__219bc93e__\"","export default \"__VITE_ASSET__07ef65cb__\"","export default \"__VITE_ASSET__60605a3f__\"","export default \"__VITE_ASSET__1b1db7a1__\"","export default \"__VITE_ASSET__0d05d4c1__\"","export default \"__VITE_ASSET__b055dcc3__\"","export default \"__VITE_ASSET__66769c53__\"","export default \"__VITE_ASSET__27070269__\"","export default \"__VITE_ASSET__beb38987__\"","export default \"__VITE_ASSET__3981e088__\"","export default \"__VITE_ASSET__f5b8f828__\"","export default \"__VITE_ASSET__df35ad17__\"","export default \"__VITE_ASSET__c0792a8a__\"","export default \"__VITE_ASSET__514334a4__\"","export default \"__VITE_ASSET__40793151__\"","export default \"__VITE_ASSET__977b04a2__\"","export default \"__VITE_ASSET__e6204d41__\"","export default \"__VITE_ASSET__8ef1dcc4__\""],"names":[],"mappings":";AAAA,MAAe,aAAA;ACAf,MAAe,UAAA;ACAf,MAAe,cAAA;ACAf,MAAe,YAAA;ACAf,MAAe,WAAA;ACAf,MAAe,SAAA;ACAf,MAAe,WAAA;ACAf,MAAe,UAAA;ACAf,MAAe,YAAA;ACAf,MAAe,gBAAA;ACAf,MAAe,UAAA;ACAf,MAAe,UAAA;ACAf,MAAe,SAAA;ACAf,MAAe,aAAA;ACAf,MAAe,YAAA;ACAf,MAAe,aAAA;ACAf,MAAe,SAAA;ACAf,MAAe,SAAA;ACAf,MAAe,eAAA;ACAf,MAAe,aAAA;ACAf,MAAe,WAAA;ACAf,MAAe,UAAA;ACAf,MAAe,YAAA;ACAf,MAAe,aAAA;ACAf,MAAe,UAAA;ACAf,MAAe,UAAA;ACAf,MAAe,MAAA;ACAf,MAAe,QAAA;ACAf,MAAe,KAAA;ACAf,MAAe,QAAA;ACAf,MAAe,WAAA;ACAf,MAAe,OAAA;ACAf,MAAe,UAAA;ACAf,MAAe,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

unpackage/dist/dev/mp-weixin/common/assets.js

@@ -11,6 +11,12 @@ const switchImg = "/static/switch.png";
 const arrowrightImg = "/static/arrowright.png";
 const headImg = "/static/headImg.png";
 const certImg = "/static/cert.png";
+const myFile = "/static/myFile.png";
+const myDownload = "/static/myDownload.png";
+const myCollect = "/static/myCollect.png";
+const myHospital = "/static/myHospital.png";
+const myJoin = "/static/myJoin.png";
+const myTalk = "/static/myTalk.png";
 const collectonImg = "/static/collectOn.png";
 const collectImg = "/static/collect.png";
 const shangImg = "/static/shang.png";
@@ -44,6 +50,12 @@ exports.img = img;
 exports.ku = ku;
 exports.ku_on = ku_on;
 exports.logoImg = logoImg;
+exports.myCollect = myCollect;
+exports.myDownload = myDownload;
+exports.myFile = myFile;
+exports.myHospital = myHospital;
+exports.myJoin = myJoin;
+exports.myTalk = myTalk;
 exports.photoImg = photoImg;
 exports.selfImg = selfImg;
 exports.shangImg = shangImg;

unpackage/dist/dev/mp-weixin/pages/my/my.js

@@ -24,7 +24,7 @@ const _sfc_main = {
       api_api.api.getUserInfo().then((res) => {
         const result = res.data.data;
         Object.assign(userInfo, result);
-        common_vendor.index.__f__("log", "at pages/my/my.vue:102", result);
+        common_vendor.index.__f__("log", "at pages/my/my.vue:139", result);
         if (userInfo.doctor_id) {
           getNum(userInfo.doctor_id);
         }
@@ -100,9 +100,9 @@ const _sfc_main = {
         h: numInfo.article_num > 0
       }, numInfo.article_num > 0 ? {
         i: common_vendor.p({
-          name: "chat-fill",
-          color: "#000",
-          size: "28"
+          src: common_vendor.unref(common_assets.myFile),
+          width: "34rpx",
+          height: "34rpx"
         }),
         j: common_vendor.p({
           name: "arrow-right",
@@ -112,9 +112,9 @@ const _sfc_main = {
         k: common_vendor.o(($event) => goDoctor(userInfo.doctor_id, userInfo.user_name))
       } : {}, {
         l: common_vendor.p({
-          name: "chat-fill",
-          color: "#000",
-          size: "28"
+          src: common_vendor.unref(common_assets.myDownload),
+          width: "42rpx",
+          height: "42rpx"
         }),
         m: common_vendor.p({
           name: "arrow-right",
@@ -125,9 +125,9 @@ const _sfc_main = {
         o: hospitalInfo.video_read_num > 0 || hospitalInfo.article_read_num > 0
       }, hospitalInfo.video_read_num > 0 || hospitalInfo.article_read_num > 0 ? {
         p: common_vendor.p({
-          name: "chat-fill",
-          color: "#000",
-          size: "28"
+          src: common_vendor.unref(common_assets.myHospital),
+          width: "39rpx",
+          height: "39rpx"
         }),
         q: common_vendor.t(userInfo.hospital_name),
         r: common_vendor.p({
@@ -138,9 +138,9 @@ const _sfc_main = {
         s: common_vendor.o(($event) => goHospital(userInfo.hospital_id, userInfo.hospital_name))
       } : {}, {
         t: common_vendor.p({
-          name: "chat-fill",
-          color: "#000",
-          size: "28"
+          src: common_vendor.unref(common_assets.myTalk),
+          width: "39rpx",
+          height: "39rpx"
         }),
         v: common_vendor.p({
           name: "arrow-right",
@@ -149,9 +149,9 @@ const _sfc_main = {
         }),
         w: common_vendor.o(mySpecial),
         x: common_vendor.p({
-          name: "chat-fill",
-          color: "#000",
-          size: "28"
+          src: common_vendor.unref(common_assets.myJoin),
+          width: "39rpx",
+          height: "39rpx"
         }),
         y: common_vendor.p({
           name: "arrow-right",
@@ -160,9 +160,9 @@ const _sfc_main = {
         }),
         z: common_vendor.o(goJoin),
         A: common_vendor.p({
-          name: "chat-fill",
-          color: "#000",
-          size: "28"
+          src: common_vendor.unref(common_assets.myCollect),
+          width: "39rpx",
+          height: "39rpx"
         }),
         B: common_vendor.p({
           name: "arrow-right",

unpackage/dist/dev/mp-weixin/pages/my/my.wxml

@@ -1 +1 @@
-<view class="upage data-v-2f1ef635"><d-nav class="data-v-2f1ef635" u-i="2f1ef635-0" bind:__l="__l"></d-nav><view class="con data-v-2f1ef635"><view class="infobox data-v-2f1ef635"><up--image wx:if="{{a}}" class="data-v-2f1ef635" u-i="2f1ef635-1" bind:__l="__l" u-p="{{a}}"></up--image><view class="info data-v-2f1ef635"><view class="name data-v-2f1ef635">{{b}}（{{c}}） </view><view class="hospital data-v-2f1ef635">{{d}}</view></view></view><view class="databox data-v-2f1ef635"><view class="cell data-v-2f1ef635"><view class="num data-v-2f1ef635">{{e}}</view><view class="name data-v-2f1ef635">文章</view></view><view class="cell data-v-2f1ef635"><view class="num data-v-2f1ef635">{{f}}</view><view class="name data-v-2f1ef635">视频</view></view><view class="cell data-v-2f1ef635"><view class="num data-v-2f1ef635">{{g}}</view><view class="name data-v-2f1ef635">阅读量</view></view></view><view class="listbox data-v-2f1ef635"><view class="titlename data-v-2f1ef635">我的临床病例库</view><view wx:if="{{h}}" class="cell data-v-2f1ef635" bindtap="{{k}}"><view class="left data-v-2f1ef635"><u-icon wx:if="{{i}}" class="data-v-2f1ef635" u-i="2f1ef635-2" bind:__l="__l" u-p="{{i}}"></u-icon><view class="title data-v-2f1ef635">我的病例库</view></view><u-icon wx:if="{{j}}" class="data-v-2f1ef635" u-i="2f1ef635-3" bind:__l="__l" u-p="{{j}}"></u-icon></view><view class="cell data-v-2f1ef635" bindtap="{{n}}"><view class="left data-v-2f1ef635"><u-icon wx:if="{{l}}" class="data-v-2f1ef635" u-i="2f1ef635-4" bind:__l="__l" u-p="{{l}}"></u-icon><view class="title data-v-2f1ef635">临床病例库收录证书下载</view></view><u-icon wx:if="{{m}}" class="data-v-2f1ef635" u-i="2f1ef635-5" bind:__l="__l" u-p="{{m}}"></u-icon></view><view wx:if="{{o}}" class="cell data-v-2f1ef635" bindtap="{{s}}"><view class="left data-v-2f1ef635"><u-icon wx:if="{{p}}" class="data-v-2f1ef635" u-i="2f1ef635-6" bind:__l="__l" u-p="{{p}}"></u-icon><view class="title data-v-2f1ef635">{{q}}临床病例库</view></view><u-icon wx:if="{{r}}" class="data-v-2f1ef635" u-i="2f1ef635-7" bind:__l="__l" u-p="{{r}}"></u-icon></view><view class="cell data-v-2f1ef635" bindtap="{{w}}"><view class="left data-v-2f1ef635"><u-icon wx:if="{{t}}" class="data-v-2f1ef635" u-i="2f1ef635-8" bind:__l="__l" u-p="{{t}}"></u-icon><view class="title data-v-2f1ef635">我的病例交流</view></view><u-icon wx:if="{{v}}" class="data-v-2f1ef635" u-i="2f1ef635-9" bind:__l="__l" u-p="{{v}}"></u-icon></view><view class="cell data-v-2f1ef635" bindtap="{{z}}"><view class="left data-v-2f1ef635"><u-icon wx:if="{{x}}" class="data-v-2f1ef635" u-i="2f1ef635-10" bind:__l="__l" u-p="{{x}}"></u-icon><view class="title data-v-2f1ef635">我的参与互动</view></view><u-icon wx:if="{{y}}" class="data-v-2f1ef635" u-i="2f1ef635-11" bind:__l="__l" u-p="{{y}}"></u-icon></view><view class="cell data-v-2f1ef635" bindtap="{{C}}"><view class="left data-v-2f1ef635"><u-icon wx:if="{{A}}" class="data-v-2f1ef635" u-i="2f1ef635-12" bind:__l="__l" u-p="{{A}}"></u-icon><view class="title data-v-2f1ef635">浏览与收藏</view></view><u-icon wx:if="{{B}}" class="data-v-2f1ef635" u-i="2f1ef635-13" bind:__l="__l" u-p="{{B}}"></u-icon></view></view></view><view class="publish data-v-2f1ef635" bindtap="{{E}}"><u-icon wx:if="{{D}}" class="data-v-2f1ef635" u-i="2f1ef635-14" bind:__l="__l" u-p="{{D}}"></u-icon></view></view>
+<view class="upage data-v-2f1ef635"><d-nav class="data-v-2f1ef635" u-i="2f1ef635-0" bind:__l="__l"></d-nav><view class="con data-v-2f1ef635"><view class="infobox data-v-2f1ef635"><up--image wx:if="{{a}}" class="data-v-2f1ef635" u-i="2f1ef635-1" bind:__l="__l" u-p="{{a}}"></up--image><view class="info data-v-2f1ef635"><view class="name data-v-2f1ef635">{{b}}（{{c}}） </view><view class="hospital data-v-2f1ef635">{{d}}</view></view></view><view class="databox data-v-2f1ef635"><view class="cell data-v-2f1ef635"><view class="num data-v-2f1ef635">{{e}}</view><view class="name data-v-2f1ef635">文章</view></view><view class="cell data-v-2f1ef635"><view class="num data-v-2f1ef635">{{f}}</view><view class="name data-v-2f1ef635">视频</view></view><view class="cell data-v-2f1ef635"><view class="num data-v-2f1ef635">{{g}}</view><view class="name data-v-2f1ef635">阅读量</view></view></view><view class="listbox data-v-2f1ef635"><view class="titlename data-v-2f1ef635">我的临床病例库</view><view wx:if="{{h}}" class="cell data-v-2f1ef635" bindtap="{{k}}"><view class="left data-v-2f1ef635"><up--image wx:if="{{i}}" class="data-v-2f1ef635" u-i="2f1ef635-2" bind:__l="__l" u-p="{{i}}"></up--image><view class="title data-v-2f1ef635">我的病例库</view></view><u-icon wx:if="{{j}}" class="data-v-2f1ef635" u-i="2f1ef635-3" bind:__l="__l" u-p="{{j}}"></u-icon></view><view class="cell data-v-2f1ef635" bindtap="{{n}}"><view class="left data-v-2f1ef635"><up--image wx:if="{{l}}" class="data-v-2f1ef635" u-i="2f1ef635-4" bind:__l="__l" u-p="{{l}}"></up--image><view class="title data-v-2f1ef635">临床病例库收录证书下载</view></view><u-icon wx:if="{{m}}" class="data-v-2f1ef635" u-i="2f1ef635-5" bind:__l="__l" u-p="{{m}}"></u-icon></view><view wx:if="{{o}}" class="cell data-v-2f1ef635" bindtap="{{s}}"><view class="left data-v-2f1ef635"><up--image wx:if="{{p}}" class="data-v-2f1ef635" u-i="2f1ef635-6" bind:__l="__l" u-p="{{p}}"></up--image><view class="title data-v-2f1ef635">{{q}}临床病例库</view></view><u-icon wx:if="{{r}}" class="data-v-2f1ef635" u-i="2f1ef635-7" bind:__l="__l" u-p="{{r}}"></u-icon></view><view class="cell data-v-2f1ef635" bindtap="{{w}}"><view class="left data-v-2f1ef635"><up--image wx:if="{{t}}" class="data-v-2f1ef635" u-i="2f1ef635-8" bind:__l="__l" u-p="{{t}}"></up--image><view class="title data-v-2f1ef635">我的病例交流</view></view><u-icon wx:if="{{v}}" class="data-v-2f1ef635" u-i="2f1ef635-9" bind:__l="__l" u-p="{{v}}"></u-icon></view><view class="cell data-v-2f1ef635" bindtap="{{z}}"><view class="left data-v-2f1ef635"><up--image wx:if="{{x}}" class="data-v-2f1ef635" u-i="2f1ef635-10" bind:__l="__l" u-p="{{x}}"></up--image><view class="title data-v-2f1ef635">我的参与互动</view></view><u-icon wx:if="{{y}}" class="data-v-2f1ef635" u-i="2f1ef635-11" bind:__l="__l" u-p="{{y}}"></u-icon></view><view class="cell data-v-2f1ef635" bindtap="{{C}}"><view class="left data-v-2f1ef635"><up--image wx:if="{{A}}" class="data-v-2f1ef635" u-i="2f1ef635-12" bind:__l="__l" u-p="{{A}}"></up--image><view class="title data-v-2f1ef635">浏览与收藏</view></view><u-icon wx:if="{{B}}" class="data-v-2f1ef635" u-i="2f1ef635-13" bind:__l="__l" u-p="{{B}}"></u-icon></view></view></view><view class="publish data-v-2f1ef635" bindtap="{{E}}"><u-icon wx:if="{{D}}" class="data-v-2f1ef635" u-i="2f1ef635-14" bind:__l="__l" u-p="{{D}}"></u-icon></view></view>

unpackage/dist/dev/mp-weixin/pages/my/my.wxss

@@ -60,6 +60,10 @@
   justify-content: space-between;
   align-items: center;
 }
+.listbox .cell.data-v-2f1ef635 .u-image {
+  margin-top: 9rpx;
+  background: none !important;
+}
 .listbox .cell .left.data-v-2f1ef635 {
   display: flex;
   justify-content: space-between;