”我的“界面更新

src/components/Mine/Branch/branch.vue

+<template>
+  <div class=" bg-white pt-4 px-5">
+  <!-- 网点位置 -->
+  <div class=" pb-4">
+      <div class=" mb-3">
+        <img src="../../../assets/img/bank_logo.png" class=" w-6 h-6 inline-block m-auto">
+        <span class="ml-2 text-gray-800 font-semibold text-base">杭州文辉支行</span>
+        <p class=" bg-branch-bg text-branch-font text-sm px-2 py-1 rounded inline float-right">网点</p>
+      </div>
+      <span class=" text-gray-400 text-sm mt-2">浙江省杭州市文三路49号</span>
+      <span class=" text-gray-400 text-sm float-right">1.16KM</span>
+  </div>
+  <div class=" border border-gray-100"></div>
+  <!-- 营业时间 -->
+  <div>
+    
+  </div>
+  <!-- 底部操作 -->
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/Mine/Service/index.vue

+<template>
+  <div class=" h-12 bg-white flex justify-between items-center px-3 rounded-lg">
+    <div class=" flex items-center">
+      <icon
+        :name="iconName"
+        color="#4E61C9"
+        size="14"
+      />
+      <span class=" text-sm text-gray-800 ml-3">{{label}}</span>
+    </div>
+    <icon
+      name="icon-gengduo"
+      color="#8E92A3"
+      size="14"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Icon from "@/components/common/Icon.vue"
+
+export default defineComponent({
+  components:{
+    Icon
+  },
+  props: {
+    iconName: {
+      type: String,
+      default: ''
+    },
+    label:{
+      type:String,
+      default:''
+    }
+  },
+  setup () {
+    
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/withMenu/Mine/index.vue

 <template>
   <div class="mine">
-    mine
+    <!-- top -->
+    <div class=" top bg-center bg-no-repeat bg-cover">
+      <p class="  w-full text-center text-white text-base pt-14">我的</p>
+      <div class=" flex w-full pb-7 justify-between">
+        <div class="mt-8 ml-5">
+          <img src="../../../assets/icons/avatar.png" class=" w-12 h-12 inline-block">
+          <p class="text-white ml-3 inline-block">
+            <span v-if="isLogin">未登录</span>
+            <span v-else>159****9089</span>
+          </p>
+        </div>
+        <div  class=" flex h-8 bg-indigo-400 mr-0 mt-11 rounded-l-xl" 
+              @click="seeMore">
+          <span class=" text-sm leading-8 pr-2 pl-4 text-white">个人中心</span>
+          <icon
+            name="icon-gengduo"
+            color="#FFFFFF"
+            size="14"
+            class=" my-auto pr-3"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- 更多服务 -->
+    <div class=" mx-5">
+      <p class=" text-base font-semibold mt-5">更多服务</p>
+      <service class=" mt-5" iconName="icon-xiaoxizhongxin-wode" label="消息中心"/>
+      <service class=" mt-2" iconName="icon-guanyuwomen" label="关于我们" />
+    </div>
+    <!-- 我的网点 -->
+    <div class=" mx-5 mt-5">
+      <div class=" flex justify-between">
+        <p class=" text-base font-semibold">我的网点</p>
+        <p class=" flex items-end" @click="goBranch"> 
+          <span class=" text-xs mr-1">更多</span> 
+          <icon
+            name="icon-gengduo"
+            color="#8E92A3"
+            size="14"
+          />
+        </p>
+      </div>
+      <branch class=" mt-3"/>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import Vue, {defineComponent} from "vue";
+import {defineComponent} from "vue"
+import Icon from "@/components/common/Icon.vue"
+import Service from '@/components/Mine/Service/index.vue' 
+import Branch from '@/components/Mine/Branch/branch.vue'
+import { getUserMsg } from "@/utils/userMsg"
 
 export default defineComponent({
-  components: {},
+  components: {
+    Icon,
+    Service,
+    Branch
+  },
+  props: {
+    iconName: {
+      type: String,
+      default: ''
+    },
+  },
+  setup(){
+    function seeMore(){
+      
+    }
+    function goBranch(){
+    }
+    return{
+      seeMore,
+      goBranch
+    }
+  },
+  computed:{
+    isLogin(){
+      return getUserMsg == undefined ? true:false
+    }
+  },
 });
 </script>
+
+<style lang="less">
+.top{
+  background-image: url(../../../assets/img/mine_bg.png);
+}
+</style>
\ No newline at end of file

tailwind.config.js

@@ -18,6 +18,8 @@ module.exports = {
       "app-line": "#EAEAEB",
       "app-main-txt": "#516379",
       "app-minor-txt": "#EAEAEB",
+      "branch-bg":"#F9F3E8",
+      "branch-font":"#AD9781",
       black: colors.black,
       white: colors.white,
       gray: colors.coolGray,