完成详情页开发

digital-park-web/digital-park/jsconfig.json

+{
+    "compilerOptions": {
+        "target": "ES6",
+        "module": "commonjs",
+        "allowSyntheticDefaultImports": true,
+        "baseUrl": "./",
+        "paths": {
+          "@/*": ["src/*"],
+          "@api/*": ["src/api/*"]
+        }
+    },
+    "exclude": [
+        "node_modules"
+    ]
+  }

digital-park-web/digital-park/src/router/hhr.js

 // 首页、搜索、关于我们路由
 import index from "./modules/index";
-
+// 登录页
+import login from './modules/login';
+// 产品相关
+import product from './modules/product';
 export default [{
         path: "*",
         redirect: "/index", // 重定向
     },
     ...index,
+    ...login,
+    ...product,
 ];

digital-park-web/digital-park/src/router/modules/login.js

+/**
+ *
+ * 登录页
+ *
+ */
+
+ export default [
+    // 官网首页
+    {
+        path: "/login",
+        name: "Login",
+        component: () =>
+            import ("../../views/login/Login.vue"),
+        meta: {
+            title: "登录页面",
+        },
+    },
+];

digital-park-web/digital-park/src/router/modules/product.js

+/**
+ *
+ * 产品路由
+ *
+ */
+
+ export default [
+    // 产品详情
+    {
+        path: "/product-detail",
+        name: "ProductDetail",
+        component: () =>
+            import ("../../views/product/detail/ProductDetail.vue"),
+        meta: {
+            title: "产品详情",
+        },
+    },
+];

digital-park-web/digital-park/src/views/login/Login.vue

+<!-- banner -->
+<template>
+    <div class="login">
+        <Nav />
+        <LoginFrom />
+    </div>
+</template>
+
+<script>
+import Nav from "@components/Header.vue";
+import LoginFrom from "./LoginFrom/LoginFrom.vue";
+export default {
+    //import引入的组件需要注入到对象中才能使用
+    components: { Nav, LoginFrom },
+    data() {
+        //这里存放数据
+        return {};
+    },
+};
+</script>
+<style lang="scss" scoped>
+.login {
+    // @include size(100%, 600px);
+    min-height: 100vh;
+    background: url("~@/assets/images/login/loginPageBgc.png") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    .nav {
+        z-index: 100;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+}
+</style>
+

digital-park-web/digital-park/src/views/login/LoginFrom/LoginFrom.scss

+.login-from-container[data-1664161475611] {
+    $boderColor: #1e89e6;
+    $fontColor: #637485;
+
+    height: calc(100vh - 100px);
+    min-height: 820px;
+    min-width: 1200px;
+    position: relative;
+    .login-from-box {
+        height: 100%;
+        position: relative;
+        user-select: none;
+        .login-from {
+            width: 360px;
+            position: absolute;
+            right: 360px;
+            top: 30%;
+            transform: translate(0, -20%);
+            .el-input__icon {
+                color: $boderColor;
+            }
+            .el-input__inner {
+                border: 1px solid $boderColor;
+                outline: none;
+                background: transparent;
+                transition: none;
+                transform: none;
+                box-shadow: none;
+            }
+            .el-checkbox {
+                .el-checkbox__inner {
+                    border-color: $boderColor;
+                }
+                .el-checkbox__label {
+                    color: $fontColor;
+                }
+            }
+        }
+    }
+    .login-title {
+        height: 27px;
+        font-family: AlibabaPuHuiTiM;
+        font-size: 20px;
+        font-weight: bold;
+        letter-spacing: 0px;
+        color: $fontColor;
+        margin-bottom: 10px;
+    }
+    .login-sub-title {
+        font-family: Alibaba-PuHuiTi-R;
+        font-size: 14px;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0px;
+        color: $fontColor;
+        line-height: 20px;
+        margin-bottom: 30px;
+    }
+    .verification-code-row {
+        height: 40px;
+        .img-code-input {
+            width: 276px;
+            margin-right: 6px;
+            .img-code-icon {
+                width: 14px;
+                margin-top: 12px;
+                margin-left: 5px;
+            }
+            .img-code-icon-num {
+                width: 18px;
+                margin-top: 14px;
+                margin-left: 3px;
+            }
+        }
+        .img-code-box {
+            width: 78px;
+            background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+            height: 40px;
+            border-radius: 6px;
+            color: #fff;
+            text-align: center;
+            line-height: 40px;
+            cursor: pointer;
+            &.get-code {
+                font-size: 12px;
+                color: #fff;
+            }
+        }
+    }
+    .img-phone-number {
+        .img-code-icon {
+            width: 18px;
+            margin-top: 14px;
+            margin-left: 3px;
+        }
+    }
+    .remember-row {
+        height: 20px;
+        line-height: 20px;
+        .forgot-password {
+            font-size: 14px;
+            color: $fontColor;
+        }
+    }
+    .login-btn {
+        width: 360px;
+        height: 50px;
+        line-height: 50px;
+        background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+        border-radius: 6px;
+        text-align: center;
+        font-size: 18px;
+        color: #ffffff;
+        font-weight: bold;
+        margin-bottom: 30px;
+    }
+    .other-login {
+        color: $fontColor;
+        font-size: 14px;
+        .reg-span {
+            color: #0086e7;
+        }
+    }
+    .cursor-pointer {
+        cursor: pointer;
+    }
+    .mb-20 {
+        margin-bottom: 20px;
+    }
+    .fl {
+        float: left;
+    }
+    .fr {
+        float: right;
+    }
+}

digital-park-web/digital-park/src/views/login/LoginFrom/LoginFrom.vue

+<template>
+    <div class="login-from-container" data-1664161475611>
+        <div class="login-from-box">
+            <div class="login-from">
+                <div class="login-title">{{ getTitleText() }}</div>
+                <div
+                    class="login-sub-title"
+                    v-if="loginMethod == 1 || loginMethod == 2"
+                >登录之后您可以享受企业服务、税收分析、订阅信息、定制化服务</div>
+                <!-- 默认登录 -->
+                <div v-if="loginMethod == 1">
+                    <el-input placeholder="请输入用户名..." v-model="userName" class="mb-20">
+                        <i slot="prefix" class="el-input__icon el-icon-user"></i>
+                    </el-input>
+                    <el-input
+                        placeholder="请输入登录密码..."
+                        v-model="password"
+                        show-password
+                        class="mb-20"
+                    >
+                        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
+                    </el-input>
+                </div>
+                <!-- 手机登录 -->
+                <div v-if="loginMethod == 2">
+                    <el-input placeholder="请输入手机号码..." v-model="mobilePhone" class="mb-20">
+                        <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
+                    </el-input>
+                    <div class="verification-code-row mb-20">
+                        <el-input
+                            placeholder="请输入图片验证码..."
+                            v-model="imgCode"
+                            class="fl img-code-input"
+                        >
+                            <img
+                                slot="prefix"
+                                src="~@/assets/images/login/verificationCode.png"
+                                class="img-code-icon"
+                                alt
+                            />
+                        </el-input>
+                        <div class="img-code-box fl">123456</div>
+                    </div>
+                    <el-input
+                        placeholder="请输入手机验证码..."
+                        v-model="phoneCode"
+                        class="mb-20 img-phone-number"
+                    >
+                        <img
+                            slot="prefix"
+                            src="~@/assets/images/login/numCodeIcon.png"
+                            class="img-code-icon"
+                            alt
+                        />
+                    </el-input>
+                </div>
+                <!-- 注册 || 忘记密码 -->
+                <div v-if="loginMethod == 3 || loginMethod == 4">
+                    <el-input placeholder="请输入手机号码..." v-model="mobilePhone" class="mb-20">
+                        <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
+                    </el-input>
+                    <el-input placeholder="请输入用户名..." v-model="userName" class="mb-20">
+                        <i slot="prefix" class="el-input__icon el-icon-user"></i>
+                    </el-input>
+                    <el-input
+                        placeholder="请输入新密码..."
+                        v-model="newPassword"
+                        show-password
+                        class="mb-20"
+                    >
+                        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
+                    </el-input>
+                    <el-input
+                        placeholder="请再次输入新密码..."
+                        v-model="confirmPassword"
+                        show-password
+                        class="mb-20"
+                    >
+                        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
+                    </el-input>
+                    <div class="verification-code-row mb-20">
+                        <el-input
+                            placeholder="请输入图片验证码..."
+                            v-model="imgCode"
+                            class="fl img-code-input"
+                        >
+                            <img
+                                slot="prefix"
+                                src="~@/assets/images/login/verificationCode.png"
+                                class="img-code-icon"
+                                alt
+                            />
+                        </el-input>
+                        <div class="img-code-box fl">123456</div>
+                    </div>
+                    <div class="verification-code-row mb-20">
+                        <el-input
+                            placeholder="请输入手机验证码..."
+                            v-model="phoneCode"
+                            class="fl img-code-input"
+                        >
+                            <img
+                                slot="prefix"
+                                src="~@/assets/images/login/numCodeIcon.png"
+                                class="img-code-icon-num"
+                                alt
+                            />
+                        </el-input>
+                        <div class="img-code-box get-code fl">获取验证码</div>
+                    </div>
+                </div>
+                <div class="remember-row mb-20" v-if="loginMethod == 1 || loginMethod == 2">
+                    <div class="remember-password fl">
+                        <el-checkbox v-model="isRemember">记住密码</el-checkbox>
+                    </div>
+                    <span
+                        class="forgot-password fr cursor-pointer"
+                        @click="loginMethodChange(4)"
+                    >忘记密码?</span>
+                </div>
+                <div class="login-btn cursor-pointer">{{ getLoginBtnText() }}</div>
+                <div class="other-login" v-if="loginMethod == 1 || loginMethod == 2">
+                    <span
+                        class="fl cursor-pointer"
+                        v-if="loginMethod == 1"
+                        @click="loginMethodChange(2)"
+                    >手机验证码登录</span>
+                    <span
+                        class="fl cursor-pointer"
+                        v-if="loginMethod == 2"
+                        @click="loginMethodChange(1)"
+                    >账号密码登录</span>
+                    <span class="fr cursor-pointer">
+                        你还没有账户?
+                        <span class="reg-span" @click="loginMethodChange(3)">立即注册 ></span>
+                    </span>
+                </div>
+                <div class="other-login" v-else>
+                    <span class="fr cursor-pointer">
+                        已经拥有账户?
+                        <span class="reg-span" @click="loginMethodChange(1)">立即登录 ></span>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ret from "bluebird/js/release/util";
+import "./LoginFrom.scss";
+export default {
+    data() {
+        return {
+            // 登录loading
+            loginLoading: false,
+            /**
+             *
+             * 登录方式
+             * 1 默认登录
+             * 2 手机号登录
+             * 3 注册
+             * 4 忘记密码
+             *
+             */
+            loginMethod: 1,
+            // 用户名
+            userName: "",
+            // 登录密码
+            password: "",
+            // 手机号码
+            mobilePhone: "",
+            // 图片验证码
+            imgCode: "",
+            // 手机验证码
+            phoneCode: "",
+            // 新密码
+            newPassword: "",
+            // 确认密码
+            confirmPassword: "",
+            // 记住密码
+            isRemember: false,
+        };
+    },
+    methods: {
+        // 登录界面切换
+        loginMethodChange(status) {
+            this.loginMethod = status;
+        },
+        // 获取title
+        getTitleText() {
+            let { loginMethod } = this;
+            return loginMethod == 1 || loginMethod == 2
+                ? "松江经济技术开发区（小昆山分区）"
+                : loginMethod == 3
+                ? "注册"
+                : "忘记密码";
+        },
+        // 获取登录按钮文本
+        getLoginBtnText() {
+            let { loginMethod } = this;
+            return loginMethod == 1 || loginMethod == 2
+                ? "登录"
+                : loginMethod == 3
+                ? "注册"
+                : "修改密码";
+        },
+    },
+};
+</script>

digital-park-web/digital-park/src/views/product/detail/ProductDetail.scss

+.product-detial[data-1664250138954] {
+    height: 250px;
+    background: url("~@/assets/images/product/productDetialHeaderBgc.png")
+        no-repeat;
+    background-size: 100% 100%;
+    .header-box {
+        width: 1200px;
+        margin: 0 auto;
+        height: 150px;
+        position: relative;
+        .breadcrumb-nav {
+            float: left;
+            margin-top: 32px;
+            .current-position {
+                position: relative;
+                z-index: 2;
+                color: #fff;
+                font-size: 16px;
+                &.link {
+                    margin-right: 3px;
+                    cursor: pointer;
+                }
+                &.active {
+                    font-weight: bold;
+                }
+            }
+        }
+        .content {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            color: #fff;
+            
+            .title {
+                font-size: 36px;
+                font-weight: bold;
+                height: 50px;
+                line-height: 50px;
+                margin-top: 36px;
+            }
+            .sub-title {
+                margin-top: 5px;
+                font-size: 14px;
+            }
+        }
+    }
+    .detial-container {
+        width: 1200px;
+        margin: 0 auto;
+        margin-top: 30px;
+        padding-bottom: 50px;
+        border-top: 2px solid #2c94f0;
+        .ditial-banner {
+            height: 387px;
+            background: linear-gradient(to bottom, #cde8fb, #fff);
+            box-sizing: border-box;
+            padding: 27px 28px 0 30px;
+            .main-img {
+                float: left;
+                width: 530px;
+                height: 360px;
+                margin-right: 32px;
+                background: green;
+            }
+            .main-item {
+                float: left;
+                height: 360px;
+                width: calc(100% - 562px);
+                .main-title {
+                    height: 33px;
+                    line-height: 33px;
+                    font-weight: bold;
+                    font-size: 24px;
+                    color: #334a5f;
+                    @include text-ellipsis();
+                }
+            }
+            .main-price {
+                margin-top: 23px;
+                line-height: 42px;
+                font-size: 30px;
+                color: #334a5f;
+                font-weight: bold;
+                .price-value {
+                    color: #d9121a;
+                }
+            }
+            .mian-detail {
+                font-size: 16px;
+                height: 150px;
+                margin-top: 25px;
+                box-sizing: border-box;
+                line-height: 30px;
+                color: #637485;
+                @include text-ellipsis-multiple(5);
+                .mian-detail-span {
+                    font-weight: bold;
+                    color: #334a5f;
+                }
+            }
+            .main-btn {
+                margin-top: 30px;
+                height: 56px;
+                line-height: 56px;
+                width: 190px;
+                background-image: linear-gradient(
+                    135deg,
+                    #42a6fe 0%,
+                    #0070d2 100%
+                );
+                border-radius: 28px;
+                color: #fff;
+                font-size: 24px;
+                text-align: center;
+                .consult-icon {
+                    position: relative;
+                    top: 6px;
+                    left: -3px;
+                }
+                cursor: pointer;
+            }
+        }
+        .server-detail {
+            margin-top: 30px;
+            .server-title {
+                height: 60px;
+                line-height: 60px;
+                background-image: linear-gradient(
+                    135deg,
+                    #42a6fe 0%,
+                    #0070d2 100%
+                );
+                @include font(24px, #fff);
+                padding-left: 30px;
+            }
+            .server-content {
+                padding: 30px;
+                border: solid 1px #bcd8e9;
+            }
+        }
+    }
+}

digital-park-web/digital-park/src/views/product/detail/ProductDetail.vue

+<template>
+    <div class="product-detial" data-1664250138954>
+        <div class="detial-header">
+            <Nav></Nav>
+            <div class="header-box">
+                <div class="breadcrumb-nav">
+                    <span class="current-position">
+                        <i class="el-icon-location"></i> 当前位置：
+                    </span>
+                    <span class="current-position link">首页</span>
+                    <span class="current-position link">
+                        <i class="el-icon-arrow-right"></i>
+                    </span>
+                    <span class="current-position link active">招商服务</span>
+                </div>
+                <div class="content">
+                    <div class="title">招商服务</div>
+                    <div class="sub-title">Investment promotion service</div>
+                </div>
+            </div>
+        </div>
+        <div class="detial-container">
+            <div class="ditial-banner">
+                <div class="main-img">123</div>
+                <div class="main-item">
+                    <div class="main-title" :title="'有限责任公司注册（松江）'">有限责任公司注册（松江）</div>
+                    <div class="main-price">
+                        <span class="price-label">价格：</span>
+                        <span class="price-value">¥80.00元</span>
+                    </div>
+                    <div class="mian-detail" :title="mainDetailText">
+                        <span class="mian-detail-span">详情：</span>
+                        {{ mainDetailText }}
+                    </div>
+                    <div class="main-btn">
+                        <img src="~@assets/images/product/consult-icon.png" class="consult-icon" alt="icon"> 立即咨询
+                    </div>
+                </div>
+            </div>
+            <div class="server-detail">
+                <div class="server-title">
+                    服务详情
+                </div>
+                <div class="server-content">
+                    123
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Nav from "@components/Header.vue";
+import "./ProductDetail.scss";
+export default {
+    components: { Nav },
+    data() {
+        return {
+            mainDetailText: `根据一个纳税年度内的所得、应纳税额、已缴(扣)税额、抵免(扣)税额、应补(退)税额等情况，如实填写并报送《个人所得税纳税申报表(适用于年所得12万元以上的纳税人申报)》、个人有效身份证件复印件，以及主管税务机关要求报送的其他有关资料。有效身份证件，包括纳税人的身份证、护照、回乡证、军人身份证件等。`,
+        };
+    },
+};
+</script>
+