diff --git a/package-lock.json b/package-lock.json
index 8a536dc..c0264e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "ali-oss": "^6.17.1",
         "axios": "^1.2.2",
         "cropperjs": "^1.5.13",
+        "dayjs": "^1.11.7",
         "driver.js": "^0.9.8",
         "file-saver": "^2.0.5",
         "gsap": "^3.11.4",
@@ -3115,6 +3116,11 @@
         "node": "*"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
@@ -11981,6 +11987,11 @@
       "resolved": "https://registry.npmmirror.com/dateformat/-/dateformat-2.2.0.tgz",
       "integrity": "sha512-GODcnWq3YGoTnygPfi02ygEiRxqUxpJwuRHjdhJYuxpcZmDq4rjBiXYmbCCzStxo176ixfLT6i4NPwQooRySnw=="
     },
+    "dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index 3afc9fb..01d8560 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "ali-oss": "^6.17.1",
     "axios": "^1.2.2",
     "cropperjs": "^1.5.13",
+    "dayjs": "^1.11.7",
     "driver.js": "^0.9.8",
     "file-saver": "^2.0.5",
     "gsap": "^3.11.4",
diff --git a/src/api/pay.js b/src/api/pay.js
new file mode 100644
index 0000000..e9ee5e8
--- /dev/null
+++ b/src/api/pay.js
@@ -0,0 +1,9 @@
+import Request from '@/utils/request';
+
+const request = new Request();
+
+export const getVipPayList = () => {
+    return request({
+        url: '/user/vip/pay/list',
+    });
+};
diff --git a/src/assets/images/alipay.png b/src/assets/images/alipay.png
new file mode 100644
index 0000000..2f0a945
Binary files /dev/null and b/src/assets/images/alipay.png differ
diff --git a/src/libs/Countdown/index.vue b/src/libs/Countdown/index.vue
new file mode 100644
index 0000000..dc423db
--- /dev/null
+++ b/src/libs/Countdown/index.vue
@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <slot>
+            <p class="text-sm">
+                {{ showTime }}
+            </p>
+        </slot>
+    </div>
+</template>
+
+<script>
+// 倒计时结束
+const EMIT_FINISH = 'finish';
+// 倒计时改变
+const EMIT_CHANGE = 'change';
+
+const INTERVAL_COUNT = 1000;
+</script>
+<script setup>
+import { ref, watch, computed, onUnmounted } from 'vue';
+import dayjs from './utils';
+
+const props = defineProps({
+    // 毫秒 时间戳
+    time: {
+        type: Number,
+        required: true,
+    },
+    // 遵循dayjs 标准
+    format: {
+        type: String,
+        default: 'HH:mm:ss',
+    },
+});
+
+const emits = defineEmits([EMIT_FINISH, EMIT_CHANGE]);
+
+// 倒计时时长
+const duration = ref(0);
+
+// 开始倒计时
+let iterval = null;
+const start = () => {
+    // 开始前结束下
+    close();
+    iterval = setInterval(() => {
+        durationFn();
+    }, INTERVAL_COUNT);
+};
+
+// 倒计时执行
+const durationFn = () => {
+    duration.value -= INTERVAL_COUNT;
+    emits(EMIT_CHANGE, duration);
+    // 结束
+    if (duration.value <= 0) {
+        duration.value = 0;
+        emits(EMIT_FINISH);
+        close();
+    }
+};
+
+// 倒计时结束
+const close = () => {
+    iterval && clearInterval(iterval);
+};
+
+// 显示时间
+const showTime = computed(() => {
+    return dayjs.duration(duration.value).format(props.format);
+});
+
+// 开始
+watch(
+    () => props.time,
+    (val) => {
+        duration.value = val;
+        start();
+    },
+    { immediate: true }
+);
+
+// 组件销毁时候清理倒计时
+onUnmounted(() => {
+    close();
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/libs/Countdown/utils.js b/src/libs/Countdown/utils.js
new file mode 100644
index 0000000..508be6c
--- /dev/null
+++ b/src/libs/Countdown/utils.js
@@ -0,0 +1,9 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import duration from 'dayjs/plugin/duration';
+
+dayjs.locale('zh');
+
+dayjs.extend(duration);
+
+export default dayjs;
diff --git a/src/libs/TransitionRouterView/index.vue b/src/libs/TransitionRouterView/index.vue
index 65c31de..baa2364 100644
--- a/src/libs/TransitionRouterView/index.vue
+++ b/src/libs/TransitionRouterView/index.vue
@@ -11,7 +11,10 @@
             <keep-alive :include="virtualTaskStack">
                 <component
                     :is="Component"
-                    :class="{ 'fixed top-0 left-0 w-screen z-50': isAnimation }"
+                    class="fixed top-0 left-0 w-screen"
+                    :class="{
+                        'fixed top-0 left-0 w-screen z-50': isMobileTerminal,
+                    }"
                     :key="$route.fullPath"
                 />
             </keep-alive>
@@ -22,6 +25,7 @@
 <script>
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { isMobileTerminal } from '@/utils/flexible.js';
 
 // 无需监听路由的各种状态（在 PC 端下）
 const NONE = 'none';
@@ -70,7 +74,6 @@ const transitionName = ref('');
 router.beforeEach((to, from) => {
     // 定义当前动画名称
     transitionName.value = props.routerType;
-    console.log('[ transitionName.value ]', transitionName.value);
     if (props.routerType === PUSH) {
         // 入栈
         virtualTaskStack.value.push(to.name);
diff --git a/src/router/modules/mobile-routes.js b/src/router/modules/mobile-routes.js
index e8f8444..c4e6e98 100644
--- a/src/router/modules/mobile-routes.js
+++ b/src/router/modules/mobile-routes.js
@@ -28,4 +28,12 @@ export default [
             user: true,
         },
     },
+    {
+        path: '/member',
+        name: 'member',
+        component: () => import('@/views/member'),
+        meta: {
+            user: true,
+        },
+    },
 ];
diff --git a/src/router/modules/pc-routes.js b/src/router/modules/pc-routes.js
index 3197af0..a729138 100644
--- a/src/router/modules/pc-routes.js
+++ b/src/router/modules/pc-routes.js
@@ -18,6 +18,14 @@ export default [
                     user: true,
                 },
             },
+            {
+                path: '/member',
+                name: 'member',
+                component: () => import('@/views/member'),
+                meta: {
+                    user: true,
+                },
+            },
         ],
     },
     {
diff --git a/src/views/layout/components/header/profile/index.vue b/src/views/layout/components/header/profile/index.vue
index 306940e..d380820 100644
--- a/src/views/layout/components/header/profile/index.vue
+++ b/src/views/layout/components/header/profile/index.vue
@@ -62,7 +62,7 @@ const profileMenu = [
         id: 1,
         icon: 'vip-profile',
         title: '升级VIP',
-        path: '/profile',
+        path: '/member',
     },
     {
         id: 2,
diff --git a/src/views/main/index.vue b/src/views/main/index.vue
index 3744bbc..a8065c4 100644
--- a/src/views/main/index.vue
+++ b/src/views/main/index.vue
@@ -51,11 +51,13 @@ import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { useScroll } from '@vueuse/core';
 import { ref, onActivated } from 'vue';
+console.log('[ home组件渲染 ]');
 
 const store = useStore();
 const router = useRouter();
 const onVipClick = () => {
     store.commit('app/changeRouterType', 'push');
+    router.push('/member');
 };
 const onMyClick = () => {
     store.commit('app/changeRouterType', 'push');
diff --git a/src/views/member/components/PayMenuItem/index.vue b/src/views/member/components/PayMenuItem/index.vue
new file mode 100644
index 0000000..4470088
--- /dev/null
+++ b/src/views/member/components/PayMenuItem/index.vue
@@ -0,0 +1,78 @@
+<template>
+    <!-- 单个的支付项 -->
+    <div
+        class="flex-none flex flex-col items-center w-[100px] mt-2 mr-2 py-3 border-[1px] hover:bg-orange-50 hover:border-orange-300 rounded-md relative cursor-pointer xl:w-[150px] xl:py-2"
+        :class="[
+            select
+                ? 'bg-orange-50 dark:bg-orange-50/10 border-orange-300 '
+                : 'bg-white dark:bg-zinc-900 border-zinc-300 dark:border-zinc-500',
+        ]"
+        @click="onItemClick"
+    >
+        <!-- 标题 -->
+        <p
+            class="text-base"
+            :class="[
+                select
+                    ? 'text-yellow-800 dark:text-orange-300'
+                    : 'text-yellow-800 dark:text-zinc-300',
+            ]"
+        >
+            {{ data.title }}
+        </p>
+        <!-- 价格 -->
+        <p
+            class="text-[32px] tracking-tighter font-sans font-bold"
+            :class="[
+                select
+                    ? 'text-yellow-800 dark:text-orange-300'
+                    : 'text-yellow-800 dark:text-zinc-300',
+            ]"
+        >
+            <span class="text-base">￥</span>
+            {{ data.price }}
+        </p>
+        <!-- 原价 -->
+        <p class="text-xs text-yellow-500 line-through">
+            ￥{{ data.oldPrice }}
+        </p>
+        <!-- 热销 -->
+        <div
+            v-if="hot"
+            class="absolute right-[-1px] top-[-12px] h-[22px] w-[48px] leading-[22px] text-center text-yellow-700 bg-gradient-to-r from-orange-300 to-orange-100 text-[12px] rounded-tr-[10px] rounded-bl-[10px]"
+        >
+            热销
+        </div>
+    </div>
+</template>
+
+<script>
+const EMITS_CLICK = 'click';
+</script>
+
+<script setup>
+const props = defineProps({
+    // 数据源
+    data: {
+        type: Object,
+        required: true,
+    },
+    // 是否热选
+    hot: {
+        type: Boolean,
+    },
+    // 是否被选中
+    select: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emits = defineEmits([EMITS_CLICK]);
+
+const onItemClick = () => {
+    emits(EMITS_CLICK, props.data);
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/member/components/Payment/MobilePayment/MobilePaymentSelect.vue b/src/views/member/components/Payment/MobilePayment/MobilePaymentSelect.vue
new file mode 100644
index 0000000..36c9ec7
--- /dev/null
+++ b/src/views/member/components/Payment/MobilePayment/MobilePaymentSelect.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="py-2 h-[80vh] flex flex-col">
+        <h2
+            class="text-xl text-zinc-900 dark:text-zinc-200 font-bold mb-2 px-1"
+        >
+            选择支付方式
+        </h2>
+        <!-- 支付宝 -->
+        <div
+            class="flex items-center px-2 py-2 border-b border-b-zinc-200 dark:border-b-zinc-600 active:bg-zinc-200 dark:active:bg-zinc-900"
+            @click="onAlipay"
+        >
+            <img class="w-4 h-4" src="@/assets/images/alipay.png" alt="" />
+            <p class="text-xl ml-1 text-zinc-800 dark:text-zinc-200">支付宝</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// import { alipay } from '@/utils/pay';
+
+// const props = defineProps({
+//     payData: {
+//         required: true,
+//         type: Object,
+//     },
+// });
+
+const onAlipay = () => {
+    // alipay(props.payData.title, props.payData.desc);
+};
+</script>
diff --git a/src/views/member/components/Payment/MobilePayment/index.vue b/src/views/member/components/Payment/MobilePayment/index.vue
new file mode 100644
index 0000000..88c218a
--- /dev/null
+++ b/src/views/member/components/Payment/MobilePayment/index.vue
@@ -0,0 +1,48 @@
+<template>
+    <div
+        class="fixed left-0 bottom-0 w-screen text-center bg-white dark:bg-zinc-800 xl:hidden"
+    >
+        <!-- 特惠提示 -->
+        <Discounts />
+        <!-- 支付 -->
+        <div class="flex justify-between text-xs px-1 py-0.5">
+            <div class="text-left text-zinc-900 dark:text-zinc-200">
+                <p class="">
+                    券后合计：<span
+                        class="text-red-600 text-[16px] font-sans font-medium"
+                        >￥</span
+                    ><span
+                        class="text-red-600 text-[22px] font-sans font-medium"
+                        >9</span
+                    >
+                </p>
+                <p class="text-red-600">优惠券：限时立减 ￥10</p>
+            </div>
+            <HButton
+                class="w-[120px]"
+                :isActiveAnim="false"
+                @click="onConfirmClick"
+            >
+                立即开通
+            </HButton>
+        </div>
+        <!-- TODO: popup -->
+        <Popup v-model="isOpenPopup" class="rounded-tl rounded-tr">
+            <!-- <mobile-pay-select-vue :payData="payData" /> -->
+            <MobilePaymentSelect />
+        </Popup>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Discounts from '../discounts.vue';
+import MobilePaymentSelect from './MobilePaymentSelect';
+
+const isOpenPopup = ref(false);
+const onConfirmClick = () => {
+    isOpenPopup.value = true;
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/member/components/Payment/PcPayment/index.vue b/src/views/member/components/Payment/PcPayment/index.vue
new file mode 100644
index 0000000..4c3e00b
--- /dev/null
+++ b/src/views/member/components/Payment/PcPayment/index.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="mt-10">
+        <!-- 特惠提示 -->
+        <Discounts />
+        <div
+            class="flex flex-col items-center justify-evenly border-zinc-200 dark:border-zinc-600 border-[1px] py-3 rounded-md mt-1"
+        >
+            <p class="text-[32px] text-orange-600 font-sans">
+                <span class="text-base text-zinc-900 dark:text-zinc-200">
+                    支付金额：
+                </span>
+                <span class="text-lg mr-[-12px]">￥</span>
+                19
+            </p>
+
+            <div class="flex mt-3">
+                <!-- 支付宝支付 -->
+                <div
+                    class="border border-zinc-200 dark:border-zinc-600 rounded-sm w-[220px] h-[60px] flex items-center pl-2 cursor-pointer duration-200 hover:bg-zinc-50 hover:dark:bg-zinc-800"
+                    @click="onAliPayClick"
+                >
+                    <img
+                        class="w-4 h-4"
+                        src="@/assets/images/alipay.png"
+                        alt=""
+                    />
+                    <p class="text-xl ml-1 text-zinc-800 dark:text-zinc-200">
+                        支付宝
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Discounts from '../discounts.vue';
+// import { alipay } from '@/utils/pay';
+
+// const props = defineProps({
+//     payData: {
+//         required: true,
+//         type: Object,
+//     },
+// });
+
+const onAliPayClick = () => {
+    // alipay(props.payData.title, props.payData.desc);
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/member/components/Payment/discounts.vue b/src/views/member/components/Payment/discounts.vue
new file mode 100644
index 0000000..4f4f5a9
--- /dev/null
+++ b/src/views/member/components/Payment/discounts.vue
@@ -0,0 +1,26 @@
+<template>
+    <div
+        class="flex justify-center items-center py-0.5 bg-orange-100 border-orange-300 border-t xl:border xl:rounded-sm"
+        v-if="!isCountDownFinish"
+    >
+        <SvgIcon
+            name="countdown"
+            class="w-1.5 h-1.5 mr-1"
+            fillClass="fill-red-600"
+        />
+        <p class="text-xs text-red-600 font-bold">
+            限时特惠 | 距离优惠结束仅剩
+            <Countdown
+                :time="52 * 60 * 1000"
+                class="inline-block"
+                @finish="isCountDownFinish = true"
+            />
+        </p>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+// 倒计时是否结束
+const isCountDownFinish = ref(false);
+</script>
diff --git a/src/views/member/components/Payment/index.vue b/src/views/member/components/Payment/index.vue
new file mode 100644
index 0000000..e0d130e
--- /dev/null
+++ b/src/views/member/components/Payment/index.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <PcPayment v-if="!isMobileTerminal" />
+        <MobilePayment v-else />
+    </div>
+</template>
+
+<script setup>
+import PcPayment from './PcPayment';
+import MobilePayment from './MobilePayment';
+
+import { isMobileTerminal } from '@/utils/flexible';
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/member/index.vue b/src/views/member/index.vue
new file mode 100644
index 0000000..df3a106
--- /dev/null
+++ b/src/views/member/index.vue
@@ -0,0 +1,136 @@
+<template>
+    <div class="h-full bg-zinc-200 dark:bg-zinc-800 duration-400 xl:pt-1">
+        <div
+            class="max-w-screen-lg mx-auto bg-white dark:bg-zinc-900 duration-400 xl:rounded-sm xl:border-zinc-200 xl:dark:border-zinc-600 xl:border-[1px] xl:px-4"
+        >
+            <!-- 移动端 navbar 处理 -->
+            <NavBar
+                v-if="isMobileTerminal"
+                sticky
+                :onLeftClick="onNavbarLeftClick"
+            >
+                精选会员
+            </NavBar>
+
+            <div class="py-2 px-1">
+                <h2
+                    class="text-center text-[34px] font-bold tracking-widest text-yellow-600"
+                >
+                    精选VIP
+                </h2>
+                <p class="text-center text-lg text-yellow-500">
+                    升级精选VIP，畅想所有内容
+                </p>
+                <div
+                    class="flex justify-between mt-5 overflow-auto pb-2 scrollbar-thin scrollbar-thumb-zinc-200 dark:scrollbar-thumb-zinc-700 scrollbar-track-transparent"
+                >
+                    <PayMenuItem
+                        v-for="item in vipPayListData"
+                        :key="item.id"
+                        :hot="item.isHot"
+                        :select="item.id === currentPayData.id"
+                        :data="item"
+                        @click="onChangeCurrentPay"
+                    />
+                </div>
+                <p class="mt-1 text-sm text-zinc-500">
+                    {{ currentPayData.desc }}
+                </p>
+                <!-- 支付 -->
+                <Payment class="mt-4" :payData="currentPayData" />
+                <!-- <payment-vue class="mt-4" :payData="currentPayData" /> -->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { getVipPayList } from '@/api/pay.js';
+import { ref } from 'vue';
+import { isMobileTerminal } from '@/utils/flexible';
+import PayMenuItem from './components/PayMenuItem';
+import Payment from './components/Payment';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+
+const vipPayListData = ref([]);
+const currentPayData = ref({});
+const getVipPayListData = async () => {
+    try {
+        const res = await getVipPayList();
+        if (Array.isArray(res)) {
+            vipPayListData.value = res;
+            currentPayData.value = res[0];
+        } else {
+            throw new Error('');
+        }
+    } catch (error) {
+        const res = [
+            {
+                id: 0,
+                title: '连续包月',
+                desc: '次月 ¥19 续费,可随时取消',
+                oldPrice: '29',
+                price: '9',
+                isHot: true,
+            },
+            {
+                id: 1,
+                title: '连续包年',
+                desc: '次月 ¥198 续费,可随时取消',
+                oldPrice: '258',
+                price: '198',
+                isHot: false,
+            },
+            {
+                id: 2,
+                title: '连续包季',
+                desc: '次月 ¥53 续费,可随时取消',
+                oldPrice: '68',
+                price: '53',
+                isHot: false,
+            },
+            {
+                id: 3,
+                title: '月卡',
+                desc: '',
+                oldPrice: '39',
+                price: '29',
+                isHot: false,
+            },
+            {
+                id: 4,
+                title: '季卡',
+                desc: '',
+                oldPrice: '79',
+                price: '68',
+                isHot: false,
+            },
+            {
+                id: 5,
+                title: '年卡',
+                desc: '',
+                oldPrice: '298',
+                price: '258',
+                isHot: false,
+            },
+        ];
+        vipPayListData.value = res;
+        currentPayData.value = res[0];
+    }
+};
+getVipPayListData();
+
+const store = useStore();
+const router = useRouter();
+const onNavbarLeftClick = () => {
+    store.commit('app/changeRouterType', 'back');
+    router.back();
+};
+
+const onChangeCurrentPay = (item) => {
+    currentPayData.value = item;
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/vite.config.js b/vite.config.js
index 35c9656..16fe349 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -34,7 +34,7 @@ export default defineConfig({
                 rewrite: (path) => path.replace(/^\/api/, ''),
             },
             '/mapi': {
-                target: 'https://imooc-front.lgdsunday.club/api/',
+                target: 'https://api.imooc-front.lgdsunday.club/api/',
                 //跨域
                 changeOrigin: true,
                 rewrite: (path) => path.replace(/^\/mapi/, ''),