数据在服务主张（service propositions）中发挥着越来越重要的作用。这就引出了一个问题：服务设计师如何以实际的方式为此类命题的数据策略做出贡献？本文翻译来自飞利浦的三位设计师写的一篇有关于数据定义框架的文章，在飞利浦，他们使用数据定义框架将数据与设计思维整合，以启用和衡量服务体验。

一、数据在服务体验中的新角色

数据和人工智能 (AI) 正在推动服务设计的新范式，其中服务体验变得更加智能、无处不在和高度个性化。数据构成了支持此类新兴服务主张的支柱，并在持续衡量其影响方面发挥着核心作用。鉴于数据发挥的重要作用，许多科技公司目前正在制定广泛的数据战略（Data strategies）。这些数据策略提供了详细的路线图，可推动服务的技术发展，并与业务目标紧密结合。

然而，这些数据策略通常是技术上的努力，侧重于平台之间的数据访问、数据流或数据存储等方面。他们往往缺乏以人为本的视角，因为他们很少关注数据收集的体验、数据如何反映现实世界的体验，或者人们在日常工作中如何与数据和人工智能进行交互。

二、数据策略及其对服务设计视角的需求

服务设计师通常只是间接参与这些数据策略的制定。虽然服务蓝图可能有助于推动数据战略发展的业务路线图，但我们看到，当服务设计视角更加结构化时，它们的质量会显著提高。

服务设计是数据战略的一个关键方面，因为它提供了更加人性化、集成化和整体化的体验视角。它的优势在于允许理解复杂的关系以及多个细节如何影响整体体验。例如，它可以帮助确定在何处以及如何收集数据以获得最高质量的结果，或者它可以为其他复杂的技术问题确定简单的流程变通方法。

由于这种附加价值，精通数据的服务设计师可以在构建以现实世界工作流程和体验为基础的以人为本的数据策略方面发挥关键作用。因此，数据策略应该是学科之间的协作努力，以确保可以从不同的角度检查和设计整体挑战。

三、将数据与服务设计集成的工具

尽管服务设计提供了价值，但我们看到服务设计人员本身通常缺少在这种数据战略协作中取得成功的工具和方法。虽然我们在为生产或开发团队创建特定要求方面有着悠久的历史，但在数据策略方面，我们通常不会就数据要求或需求以相同级别的粒度和特异性进行沟通。

这部分是因为我们必须进一步发展我们的数据能力，但也因为没有多少实用的框架可以让设计师对数据策略做出有意义和实际的贡献。如果没有正确的工具来指导我们的探索并与我们的技术同事进行交流，为数据策略做出贡献可能会让人不知所措。

我们的数据定义框架首次尝试为服务设计人员提供正确的工具，使他们能够积极参与数据战略活动。

四、数据定义框架

我们的数据定义框架挑战（服务）设计人员考虑他们明确的数据需求，促进对这些需求的探索，并在将围绕数据的思想构建成具体的数据需求方面发挥着重要作用。我们没有引入完全独立的附加流程，而是将我们的数据定义框架整合到现有的工作方式中，并旨在让那些对数据世界经验有限的人们能够了解到它。

具体流程是：

1. 以现有的体验地图为基础；
2. 识别意图和数据点；
3. 使用数据定义框架确定优先级。

1. 以现有体验地图为基础

在我们尝试构建自己的数据定义的前几次，我们非常挣扎。从头开始时，想出有意义的数据点似乎不是随机的，这是一项挑战。我们探索了如何从角色、场景或架构图开始，但这些方法给出的结果要么过于肤浅，要么过于技术化。

随着时间的推移，我们了解到（体验）地图为搭建和构思数据定义提供了宝贵的基础。我们在这里使用体验地图作为容器术语，因为这些地图可以是服务蓝图、工作流程图、用户旅程甚至是 UI 流。

基本上，任何类型的地图都可以概述用户如何通过一组具体的操作来经历体验。地图的颗粒度将表明数据定义的性质。例如，如果它是一个 UI 流，数据定义将更多地关注微交互或应用程序功能的体验含义。相比之下，如果选择的地图是一个高级工作流，那么数据定义将更多的是关于跨接触点、整体的假设数据。

为了举例说明，我们使用下图所示的图解（简化）体验图，该图显示了医疗机构中的患者如何通过冠状动脉支架置入术：

1. 患者首先会见临床医生进行摄入咨询；
2. 后来被要求进行手术；
3. 由团队讨论；
4. 在进行微创手术之前。
5. 之后，患者通常会过夜以恢复，同时受到密切监测。
6. 最后，患者出院并被鼓励为更健康的生活方式做出行为改变。

与上面提到的其他类型一样，此地图有助于在适当的上下文中可视化数据，以及与之相关的体验。该地图侧重于用户操作和事件，因此是开始以人为中心的数据探索的良好基础。

2. 识别意图和数据点（Datapoints）

下一个合乎逻辑的步骤似乎是用数据点注释地图。但是，这些数据点的范围可以从更高级别的指标（例如患者报告的结果）到较低级别的数据指标（例如护士在患者监视器上单击后退按钮的频率）。这里的问题是有几乎无限数量的选项可供探索。

为了指导数据定义过程，我们引入了“意图（intents）”。您可以将这些意图视为您希望通过数据实现的目标。我们总是使用两种截然不同的意图，它们直接反映了使用数据的不同方式：

1. “衡量（measuring）”意图，旨在针对我们作为设计师或公司需要衡量的事物，以便学习和发展我们的解决方案。
2. “启用（enabling）”意图，它侧重于我们希望使用这些数据启用的体验。

然后可以将数据点连接到这些意图，以明确这些数据点所扮演的角色。这会产生一个定义明确的关系模型，有助于以后制定战略和确定优先级。定义意图和相关数据点总是有点反复练习，其中新意图触发新数据点需求，新数据点激发新意图。

（1）识别“衡量”意图

智能产品、服务和解决方案不是一成不变的；它们可以远程配置、更新，并且可以自行学习以适应和发展。为了推动这个过程，我们需要创建反馈循环。“衡量”意图在定义学习目标方面发挥着关键作用。

它们可以包含更多以结果为导向的、评估性的目标，或者更具探索性、以洞察力为导向的目标。例如，评估性“衡量”意图可以是在引入新的患者摘要视图后评估吞吐量时间的变化。一个更具探索性的“衡量”意图可能是深入了解患者如何体验入院咨询的不同部分，以发现新的改进机会。

这些意图也可以是细化的或整体的。它们可以与体验图中的特定接触点相关联，例如，如果新的患者仪表板可以帮助护士更快地了解患者的病史。但它们也可以跨越该体验地图的多个阶段，捕捉患者如何体验整个过程。

将属性分配给“衡量”意图，就像上面提到的那样，有助于引导设计师思考正确的方面。我们在确定属性时可能会问的问题可能是：“需要多少数据？”、“持续多长时间？”、“意图是否与更高级别的体验驱动因素相关联？”和“评估目标的目标是什么？”

尽管其中一些属性也可能与您的用例相关，但我们鼓励您探索哪些属性在您的域中有意义，并在您的定义中始终如一地使用它们。然后可以使用这些“衡量”意图指导进一步的数据定义。设计师可以考虑他们需要哪些数据来回答这个问题，而不是拥有无限的选择。

（2）识别“启用”意图

智能产品、服务和解决方案需要数据来了解它们所处的环境以及人们在它们周围的行为方式，以便有意义地适应不同的情况。为了明确我们想要启用哪些体验，并定义提供这些体验所需的数据，我们引入了“启用”意图。

“启用”意图是对启用某种体验的功能或特性的描述。重要的是定义实现这些体验所需的数据，以便制定长期的数据战略。

“启用”意图中描述的功能可以根据其抽象级别而有所不同。在更详细的接触点级别，“启用”意图可以指特定的应用程序功能。图像中的自适应 UI 功能就是一个很好的例子。在更高的体验旅程级别，“启用”意图可能更多地涉及服务解决方案（它将来自接触点集合的数据汇集在一起）。

与“衡量”意图一样，“启用”意图可以具有不同的属性，有助于进一步定义它们。对于给定的“启用”意图，我们经常回答诸如“它已经可用还是计划用于未来？”、“它集成在哪个接触点？”、“它针对哪些参与者？”等问题，以及“它的预期影响是什么？”

“衡量”和“启用”意图通常是相关的，因为先验往往旨在了解后者的影响。因此，这些意图也经常共享相同的数据。

（3）识别数据点

这两种意图都为数据定义了明确的目的。我们已经简要介绍了它如何在定义具体数据点方面发挥指导作用。数据点是对正在收集的数据的简单描述。这些数据点始终连接到地图中的特定部分，在这些部分可以获取这些数据，或者将其反馈入其中。这些连接可以是我们或其他人拥有的接触点，也明确需要第三方加入一起整合。

数据点也有自己的属性来指导讨论。为了提倡对这些数据的经验观点，不仅要定义收集的数据，而且要关注收集数据的方式和地点的经验。其他属性可以是是否自动收集数据，例如医疗程序的持续时间；或者是否手动收集，例如在手术后问卷中记录的患者报告的结果。其他属性可以包括数据是客观的还是主观的；是连续收集还是定期收集；以及是否始终需要或仅在某些条件下需要。

3. 使用数据定义框架确定优先级

在反复定义“启用”和“测量”意图以及与之相关的数据点之后，我们最终得到了一个如下图所示的关系模型。

该模型中的意图和数据点可能比可以轻松解决的要多。因此，数据定义框架有助于确定未来路线图的优先级，这一点很重要。紧密关联的关系模型有助于从整体上看待这一挑战。

我们现在可以评估这些数据点所产生的影响，而不是只关注实施数据点所需的复杂性或工作量。虽然在整个旅程中跟踪患者体验可能很困难，但这样做可能是理解这两种类型的许多意图的关键因素。在这种情况下，将他们的收集优先于其他多个更易于实施的数据点的收集可能是值得的。

确定哪些数据点在路线图的哪个阶段获得优先级对于制定成功的数据策略至关重要，因为它直接关系到何时可以实现哪些“启用”和“衡量”意图。

五、未来展望

我们创建了数据定义框架，使服务设计人员能够开始为他们设计的服务的数据策略做出务实、有意义的贡献。这是我们将“数据思维”与服务设计相结合的第一步。

在飞利浦内部，我们已经将数据定义框架应用于各种服务设计挑战。我们与具有不同数据素养的利益相关者一起使用它，并从各种体验地图开始。它主要被认为是探索数据机会的工具，也是围绕数据构建思想的一种方式。尽管该框架是在医疗保健领域开发的，但我们相信它在其他领域具有潜力。我们已经看到它被应用于更通用的客户体验、专业培训服务和日常消费者服务，而不会面临重大挑战。

我们觉得这个框架现在对（服务）设计师来说特别及时，因为数据开始在我们设计的所有体验中发挥更突出的作用。作为设计师，我们的创造力和想法不应受到现有数据的限制。相反，我们应该在定义数据策略方面发挥积极作用，使我们能够随着时间的推移编排有意义的、个性化的体验。


来源：人人都是产品经理     作者：陈昱志Yeutz
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。 

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

从事互联网医疗行业的年头也不短了，做过慢病的健康管理产品，负责过互联网医院整条产品线的建设，也参与过AI健康检测硬件产品的设计。

行业中互联网医疗行业中一些公司在对外的宣传中也衍生出了数字医疗、数智医疗等新名词，无论是服务于医生、还是医院或者是药企或者是保险，最终落地或者说绕不开的都是C端患者。那么，如今市面上互联网医疗C端产品的组成成分都有哪些呢？

一、人体的重要组成成分

在谈互联网医疗C端产品的组成前，我们先用一小段介绍下人体有哪些重要组成部分：

1. 人体五脏六腑

“脏”是指实心有机构的脏器，“腑”是指空心的容器。

人体五脏包含：心脏、肝脏、脾脏、肺脏、肾脏。

人体六腑包含：小肠、胆囊、胃、大肠、膀胱等分别和五个脏相对应的五个腑，另外人体的胸腔和腹腔分为上焦、中焦、下焦，统称为三焦，是第六个腑。

五脏和六腑的关系：脏与腑是表里互相配合的，一脏配一腑，脏属阴为里，腑属阳为表。脏腑的表里是由经络来联系，即脏的经脉络于腑，腑的经脉络于脏，彼此经气相通，互相作用，因此脏与腑在病变上能够互相影响，互相传变。

2. 人体的八大系统

人体各个器官按照一定的顺序排列在一起，完成一项或多项生理活动的结构叫系统。

人体的八大系统：消化系统、呼吸系统、循环系统、泌尿系统、运动系统、生殖系统、内分泌系统和神经系统。

八大系统在神经和内分泌系统调节下，互相联系、互相制约，共同完成整个人体的全部生命活动，以保证人体生存和种族绵延。

二、互联网医疗C端产品的组成成分

看到这也许大家会纳闷，文章标题是“互联网医疗C端产品的组成和优势的建立”，PM大白怎么在开篇讲起人体的五脏六腑和八大系统呢，因为PM大白认为产品同样也是一个生命体，产品的0-1即是产品的出生、产品的迭代即是产品的成长、产品的矩阵即是种族的绵延，那么产品作为一个生命体，并且是互联网医疗产品，那么她同样存在着类似五脏六腑八大系统的组织，只是组织的名称不一样，大家不这样称呼而已。

不多说了，下文进入正题，看看互联网医疗C端产品的组成成分有哪些：

上文中提到了人体的五脏六腑：“脏”是指实心有机构的脏器，属阴；“腑”是指空心的容器，属阳。

那互联网医疗C端产品中（下文中简称为“产品”）的五脏六腑PM大白如何定义呢？

• 脏：完全通过线上流程即可完成功能目标的模块，定义为产品的“脏”。
• 腑：需要通过线上线下配合，并且对用户需求来说，线下部分才是体现产品核心价值的模块，定义为“腑”。

1. 互联网医疗C端产品的“五脏”

• 健康档案：线上线下与医疗+健康相关的所有数据记录；属于整个医疗服务的基础建设层。
• 医患沟通：患者与医生在线问诊、续方开药等。
• 患者管理：医生侧管理多名患者的工具，涉及患者标签、分组、群发等。
• 自助工具：不需要医生或医院线上直接参与，患者即可完成的“自我检查”，类似疾病百科、健康评估、疾病自查等。
• 社交模块：疾病社区、患者与患者间的交流。

2. 互联网医疗C端产品的“六腑”

• 体检服务：线上预约，线下体验。
• 门诊服务：线上挂号，线下就诊。
• 上门护理：线上预约，线下到家护理。
• 住缴挂查：线上缴费，线下就诊。
• 诊后随访：线上或线下就诊，线上或线下医生随访。
• 实物商品：商城中实物商品，药品，设备，以及健康险。

3. 互联网医疗C端产品的“八大系统”

上文中选择互联网医疗C端产品中的几个重要模块定义为其“五脏六腑”，那互联网医院C端产品中将这“五脏六腑”串联起来的八大系统又有哪些呢？其实本质是各个维度中的供需关系的维护。

1. 人：角色体系；参与互联网医疗产品正常运行的所有角色以及角色间的关系；包含：患者、医生、医院、药店、药企、医疗信息系统提供商、监管平台等；涉及：角色定位-供需分析-权责分利-习惯养成。
2. 钱：交易体系；涉及供需关系利益交换的一切流程；涉及：交易角色-交易物质-交易流程-交易结果。
3. 物：商城体系；主要指为其中一个或多个角色提供交易的集中平台；涉及：物品筛选-入库上架-精准推荐-购买使用。
4. 事：服务体系；主要指线上的医疗+健康服务的核心流程；主要包含：问诊、续方、健康管理等；涉及：流程分析，事件开始-事件组成-事件步骤-事件结果。
5. 数据：健康数据流；主要指与医疗和健康相关活动的一切数据记录；涉及：数据收集-数据存储-数据分析-数据应用。
6. 信息：健康知识；主要指与医疗和健康相关的医学知识和信息；涉及：信息产生-信息分发-反馈分析-信息应用。
7. 认知：产品认知；主要指相关角色对互联网医疗的接受程度和参与意愿强度以及其变化倾向，和对互联网医疗产品或行业价值的认知程度。
8. 周期：生命周期；角色在平台的生命周期，主要指相关角色在互联网医疗产品中不同时间阶段前提下，以上各个维度的变化规律分析。

三、互联网医疗产品的优势在何处建立

上文我们介绍了互联网医疗产品的核心组成模块，但是好像现在互联网医疗行业并没有迎来爆发期或者说没有得到大范围的应用和产生价值，那又是为何呢？

之前我在生物实验室工作，那个时候社会上就说生物行业是朝阳产业，未来可期；后来我转行到了互联网医疗行业，身边的朋友又说，互联网医疗可是互联网垂直行业中的朝阳行业，可是互联网医疗这个朝阳一直在海平面附近起起落落，一直没有升起来，更不用说什么日到中天的趋势，反而是不温不火。

更有甚者，同行们开始怀疑互联网医疗的价值到底在何处，难道互联网医疗就是卖药卖保险卖医疗周边延伸服务的工具吗？个人没有怀疑过互联网医疗价值，至少从没有怀疑过这个行业的未来价值的，只是限于当前的用户就医习惯、政策法规、相关技术以及医疗体系，医疗是一个严肃的产业，必须循序渐进与互联网、AI等新技术结合，这才是负责任的医疗行业从业者该有的态度，因为医疗健康事关生死。

如何在现在的这个行业处境下默默地建立起自己的优势才是正道，那么互联网医疗产品的优势在何处建立呢？其实有两个方向：资源和技术（也许对从事互联网医疗行业的大家来说，这就是大白话）。

1. 资源型

资源型优势：通过不断地积累医疗业务相关的核心资源建立优势。

1）数据优势

定义：这里提到的“数据”仅指患者在所有医疗、健康活动中产生的用于组成患者健康档案的数据。

来源：线下医院（核心）、线上问诊、用药记录、医保数据、健康险数据、移动设备检测数据……

政策：近期国家相关部门出台了《“十四五”全民健康信息化规划》正是一个信号，出于患者个人医疗健康数据的重要性、复杂性、安全性、隐私性，也只有国家力量才有这种能力去实现；以下是从《“十四五”全民健康信息化规划》摘录的部分信息 ：

坚持统筹集约，共建共享。坚持统筹布局，深化共建共用，增强全民健康信息化发展的系统性、整体性和协调性，以构建大平台、大系统、大目录为导向，加大信息化建设统筹力度，加强信息化基础设施集约化建设，巩固政务信息系统整合成果，进一步破除数据共享壁垒，畅通数据共享通道，推进数据全生命周期管理。

到2025年，初步建设形成统一权威、互联互通的全民健康信息平台支撑保障体系，基本实现公立医疗卫生机构与全民健康信息平台联通全覆盖。

数字健康服务成为医疗卫生服务体系的重要组成部分，每个居民拥有一份动态管理的电子健康档案和一个功能完备的电子健康码，推动每个家庭实现家庭医生签约服务，建成若干区域健康医疗大数据中心与“互联网+医疗健康”示范省，基本形成卫生健康行业机构数字化、资源网络化、服务智能化、监管一体化的全民健康信息服务体系。

目的：打通各个医疗数据孤岛，构建患者全生命周期的健康档案、属于整个现代医疗体系的底层基础建设，服务于上层所有与医疗相关的应用服务，对线上互联网医疗尤为重要；

最终在健康数据这块的发展趋势，应该是国家完成居民全生命周期的健康档案的统筹和建设，制定授权标准，然后通过授权的方式提供给具备相关资质的互联网医疗企业在其产品中进行调用。

我们选取了腾讯医疗官网以及腾讯医疗面向C端用户的一款产品：腾讯健康（小程序），看看对方在数据建设方面的的产品。

①腾讯官网

产品服务对象划分为了两类：医疗机构与患者、区域医疗。

面向不同的服务对象，腾讯提供了不同的解决方案；面向医疗机构与患者，解决方案有：

1. 微信医保支付
2. 电子健康卡
3. 肿瘤助手
4. 安全流转平台

前两种方案的实现必然需要与医保系统和医院his系统的对接，则涉及医保数据和his数据的互通；后两种方案则涉及到疾病和药品数据知识库的建设。面向区域医疗，解决方案是：微信电子健康卡开放平台、全名健康信息平台、区域智慧医疗平台、区域大数据云，这类方案完全符合了《“十四五”全民健康信息化规划》的目标。

②腾讯健康小程序

进入首页是不是发现与其他互联网医疗APP呈现的内容有所不同呢，腾讯健康既没有直接呈现大量的医生和科室，也没有直接呈现各种医疗服务包，金刚区显示的是“医保电子凭证”和“防疫健康码”，首页还还在功能区显示了“我的医保”入口，以及在服务推荐区1号位显示“本地医保码”领取和查看入口。

2）知识优势

定义：这里提到的知识主要指与健康管理，疾病治疗相关的医学知识。

来源：医生、医院、协会、医学百科以及权威医学书籍。

形式：直播、短视频、音频、图文。

目的：培养患者的健康习惯、提供患者自我健康管理的科学方法、提高患者对疾病各方面的认知以及自我治疗和线下就医的各种渠道和流程信息，对产品来讲是前期的流量入口。

我们选取百度健康官网和腾讯医典APP，看看同行在医疗健康知识这方面的重视程度和所做的努力：

我们可以看到百度健康的PC端官网没有一个医生，没有任何线上问诊等其他医疗服务入口，展示的是不同形式的疾病知识，其中包含短视频、直播、图文等形式，其实百度健康是用它的“医典”模块作为的PC端官网，如果不是百度健康搞错了，那就足以看出百度健康认为健康知识这块的重要程度；还有就是腾讯很早就做出了一款定位医学科普知识的产品——腾讯医典。

3）服务优势

定义：这里提到的服务主要指线上的问诊、开药、健康管理、挂号、等需要医生或其他专业医疗健康从业者或医疗机构参与的业务。

来源：医疗机构、专家、医生、药师、健康管理师、营养师等。

目的：医疗健康服务是最直观的能让患者感受到当前产品所具备医疗健康价值的模块，也是能帮助患者解决实际需求的重要模块，对定位于互联网医疗的产品长期发展来讲，医疗健康服务必定是后期的主要盈利入口，互联网医疗也必然会像现在的线下医疗体系改革一样摆脱以药养医的依赖。在所有的互联网医疗产品中，好大夫便是聚焦服务和坚持线上医疗服务为主要方向的一款产品。

4）商品优势

定义：这里提到的商品主要指药品、健康险、保健品等与医疗健康相关，由医疗服务延伸出的需要付费交易的实物产品。

来源：药企、健康险公司、移动健康设备等。

目的：在患者对线上医疗健康服务付费接受度还没有那么高时，采取的一种盈利生存手段；如果一家互联网医疗公司是靠药品、保险或其他非服务产品维持发展和成长的话，医疗服务型产品只是为这些盈利手段服务的话，也许会是一个成功的生意，但是个人宁愿将这类公司直接称之为医药电商公司、医疗设备提供商，而不是今天全篇讲的互联网医疗公司（或产品）；目前在京东健康上的药品收入与医疗服务收入占比接近7:1。

2. 技术型

技术型优势：通过发明或优化新的技术让线上的互联网医疗服务流程发生革命性的变化，并且获得医生、患者以及医疗权威机构或政府相关单位的认可。

1）检测技术

大家去线下就医见到医生后的第一件事是做什么？是各种抽血化验等检查，检查前的医生问诊只是为了缩小检查范围。

我们必须接受的一个现实就是：如今没有设备检查，没有具体定量的检查指标，医生可能都不会下诊断，这也不能怪医院或医生，西医就是这个流程：检查-诊断-给药或手术，而这个流程中哪些是可以在线上真正解决的呢？我想应该只有“给药”了，这也是目前大多数互联网医疗公司以药品为突破口的原因之一。

说到第一步：检查，互联网医疗是无法在线上做到医院要求的各种指标检查的，所以最终线上问诊，医生给出的结果多是“可能”、“建议线下就诊”等结论，同时也是现在线下问诊开药不支持首诊的原因，因为在没有线下确诊的情况下开具处方药是有很大风险的。

SO如果患者不用去医院就能完成医院要求的部分疾病确诊的核心指标的检测，理想情况下那是不是互联网医疗就可以实现部分疾病的检查-诊断-给药的流程了，特别是常见的慢性病或者季节性疾病。

这就依赖于便携式家庭健康检测技术和设备的发展了，例如：血管纳米机器人，全体24小时记录生物体的各种生理指标。

2）沟通技术

患者另一个不愿意接受线下问诊治疗，或不相信在不去医院的情况下，就可以给出一个满意的健康问题的解决方案的原因是——信任的力量。

因为千百年来患者就医都是与医生面对面接触进行检查诊断，线上的方式中，也许目前的视频沟通比起之前的文字或者语音的方式更进了一步，但是不光是医生无法确认是否完整地了解到了相关的病情信息，就是患者自己也会担心自己是否把病情完整陈述给了对面的医生，医生是否有认真在给自己看病。

因为每个患者的语音表达力都不同，很有可能患者对症状的描述并不是真实的疾病表现；更何况线下就医，患者都有可能去多家医院咨询问诊。

这种线上的沟通方式与面对面的沟通相比，以及加上患者早已习惯的线下就诊方式，新的沟通问诊形式让患者对另外一头医生的信任感大打折扣。

文字沟通到语音再到视频，问诊沟通方式在不断进步，但还不够，与线下相比越真实越好，越趋于线下面对面的体验越能增强患者的安全感和信任感，也许目前比较火的虚拟现实、元宇宙在沟通方式上的应用在一定程度上改变这种状态。

3. 小结

以上提到的案例基本并不会在单一维度努力去沉淀自己的产品优势，而多会综合去发展，但是需要根据自身的优势和能力范去选择建立优势的方向。

例如做医药电商的建东健康，也在大力发展医疗服务，家庭医生方面的产品；专注做医生问诊服务的好大夫也有在向药店、医院合作方面发展；上文还未提到的平安健康更是在医疗服务、医药、健康险等方面同时发力（目前平安健康财报显示其在医疗服务和医药上的营收占比已接近1:1）。

其实上文提到的这些维度大致可以分为：基础能力建设层（数据+技术）、知识引流层、医疗服务层、医疗商品层。

四、总结

医疗医药医保医健康，诊前诊中诊后整闭环；线上线下，院内院外，医院医生医护医全家；上有政策，下找对策，To G To B To C To all in；深挖坑，广积粮，医路漫漫修远兮！

1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存（不主动删除，则一直存在）；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

2.应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。

注：大家可能觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，原因就是区别1。

vuex是存储在页面上的变量，说到底还是个Object，刷新页面就清空了。而storage是存储在浏览器的，和页面就无关了，刷新页面也不会清空

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

我们经常会将Word转换成PDF，下面给大家介绍一种很不错的Word转PDF格式的方式。

打开浏览器搜索speedpdf找到并打开在线转换工具首页，选择主页上的Word转PDF进入转换（也可以点击上方所有工具字样，选择Word转PDF进入）。

将需要转换的Word文档添加上传后，点击进度条后面的转换按钮，就可以开始转换了，等待转换完成后点击下载箭头即可。

如果转换前有登录账户，还可以通过点击登录头像处，选择账户，在转换记录中查看转换状态和下载转换后的文档。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

目录

 一、vue路由概念

1.概念：

2.初体验：

二、路由基础

1.路由模式        

2.路由写法

总结手动自动配置区别：

三、路由重定向与二级路

1.路由重定向

2.二级路由

 四、路由跳转传参

1.声明式导航：

2.编程式导航

 一、vue路由概念

1.概念：

确保我们在vue中实现页面跳转到我们所想的页面

2.初体验：

 可以看到当我们点击不同的组件的时候我们实现了路由的功能：在vue中实现页面的跳转

注意看，当我点击的时候上面地址栏中加载了不同的网页。下面我们来学习下路由的写法

二、路由基础

1.路由模式

路由两种模式

路由书写写法：

在index.js中的router对象中书写

    


        


            


            

        

        


            

                const router = new VueRouter({
            

        

    

    


        


            


            

        

        


            

                mode: 'history',//默认是hash模式
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

hash模式：

路由例如: http://localhost:8080/#/home

history模式：

路由例如: http://localhost:8080/home

两种模式的区别：

1. 外观：hash的url有个#符号，history没有，history外观更好看。
2. 刷新：hash刷新会加载到地址栏对应的页面，history刷新浏览器会重新发起请求，如果服务端没有匹配当前的url，就会出现404页面。
3. history模式以后上线需要服务器端支持, 否则找的是文件夹

 2.路由写法

 起步 | Vue RouterVue Router3官网介绍： 起步 | Vue Router

①手动配置（较少使用）

1. 下载与导入vue-router
2. 导入组件
3. 创建routes路由规则（路径和页面一一对应）
4. 创建路由对象
5. 把路由对象挂载到App.vue
6. 在页面写路由导航router-link （生成a标签）
7. 在页面写路由出口router-view (生成占位盒子，用于显示页面内容)

下面开始我们相关文件的创建

1.创建我们的脚手架(此时没有选择Router)：

 2.准备我们的App.vue文件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div>
            

        

    

    


        


            


            

        

        


            

                <!-- 顶部导航栏 -->
            

        

    

    


        


            


            

        

        


            

                <div class="footer_wrap">
            

        

    

    


        


            


            

        

        


            

                <a href="#/find">发现音乐</a>
            

        

    

    


        


            


            

        

        


            

                <a href="#/my">我的音乐</a>
            

        

    

    


        


            


            

        

        


            

                <a href="#/friend">朋友</a>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                <!-- 下面内容 -->
            

        

    

    


        


            


            

        

        


            

                <div class="top"></div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                methods: {}
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            

                body,
            

        

    

    


        


            


            

        

        


            

                html {
            

        

    

    


        


            


            

        

        


            

                margin: 0;
            

        

    

    


        


            


            

        

        


            

                padding: 0;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .footer_wrap {
            

        

    

    


        


            


            

        

        


            

                position: fixed;
            

        

    

    


        


            


            

        

        


            

                left: 0;
            

        

    

    


        


            


            

        

        


            

                top: 0;
            

        

    

    


        


            


            

        

        


            

                display: flex;
            

        

    

    


        


            


            

        

        


            

                width: 100%;
            

        

    

    


        


            


            

        

        


            

                text-align: center;
            

        

    

    


        


            


            

        

        


            

                background-color: #333;
            

        

    

    


        


            


            

        

        


            

                color: #ccc;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .footer_wrap a,
            

        

    

    


        


            


            

        

        


            

                span {
            

        

    

    


        


            


            

        

        


            

                cursor: pointer;
            

        

    

    


        


            


            

        

        


            

                flex: 1;
            

        

    

    


        


            


            

        

        


            

                text-decoration: none;
            

        

    

    


        


            


            

        

        


            

                padding: 20px 0;
            

        

    

    


        


            


            

        

        


            

                line-height: 20px;
            

        

    

    


        


            


            

        

        


            

                background-color: #333;
            

        

    

    


        


            


            

        

        


            

                color: #ccc;
            

        

    

    


        


            


            

        

        


            

                border: 1px solid black;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .footer_wrap a:hover,
            

        

    

    


        


            


            

        

        


            

                span:hover {
            

        

    

    


        


            


            

        

        


            

                background-color: #555;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                .top {
            

        

    

    


        


            


            

        

        


            

                padding-top: 62px;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                .footer_wrap .router-link-active {
            

        

    

    


        


            


            

        

        


            

                background-color: #000;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

3.在src下面新建views文件夹并创建我们需要的.vue文件

3.1 find.vue

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div>
            

        

    

    


        


            


            

        

        


            

                <div class="nav_main">
            

        

    

    


        


            


            

        

        


            

                <router-link to="/Ranking">排行</router-link>
            

        

    

    


        


            


            

        

        


            

                <router-link to="/Recommend">推荐</router-link>
            

        

    

    


        


            


            

        

        


            

                <router-link to="/SongList">歌单</router-link>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <div style="1px solid red;">
            

        

    

    


        


            


            

        

        


            

                <router-view></router-view>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'find',
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            

                .nav_main {
            

        

    

    


        


            


            

        

        


            

                background-color: red;
            

        

    

    


        


            


            

        

        


            

                color: white;
            

        

    

    


        


            


            

        

        


            

                padding: 10px 0;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .nav_main a {
            

        

    

    


        


            


            

        

        


            

                text-align: center;
            

        

    

    


        


            


            

        

        


            

                text-decoration: none;
            

        

    

    


        


            


            

        

        


            

                color: white;
            

        

    

    


        


            


            

        

        


            

                font-size: 12px;
            

        

    

    


        


            


            

        

        


            

                margin: 7px 17px 0;
            

        

    

    


        


            


            

        

        


            

                padding: 0px 15px 2px 15px;
            

        

    

    


        


            


            

        

        


            

                height: 20px;
            

        

    

    


        


            


            

        

        


            

                display: inline-block;
            

        

    

    


        


            


            

        

        


            

                line-height: 20px;
            

        

    

    


        


            


            

        

        


            

                border-radius: 20px;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .nav_main a:hover {
            

        

    

    


        


            


            

        

        


            

                background-color: brown;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .nav_main .router-link-active{
            

        

    

    


        


            


            

        

        


            

                background-color: brown;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

 3.2 my.vue

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div>
            

        

    

    


        


            


            

        

        


            

                <img src="../assets/my.png" alt="" width="100%">
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'my',
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

3.3 friend.vue

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div>
            

        

    

    


        


            


            

        

        


            

                <ul>
            

        

    

    


        


            


            

        

        


            

                <li>这是当前页面 query 接收到的参数:
            

        

    

    


        


            


            

        

        


            

                <span>姓名：{{ $route.query.name }}</span> --
            

        

    

    


        


            


            

        

        


            

                <span>年龄：{{$route.query.age}}</span> 
            

        

    

    


        


            


            

        

        


            

                </li>
            

        

    

    


        


            


            

        

        


            

                <li>这是当前页面 params 接收到的参数:
            

        

    

    


        


            


            

        

        


            

                <!-- <span>姓名：{{ $route.params.name }}</span> -- 
            

        

    

    


        


            


            

        

        


            

                 <span>年龄：{{ $route.params.age }}</span>   -->
            

        

    

    


        


            


            

        

        


            

                </li>
            

        

    

    


        


            


            

        

        


            

                </ul>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'friend',
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

3.4 notfound.vue

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="box">
            

        

    

    


        


            


            

        

        


            

                <h1>这是一个 404 页面</h1>
            

        

    

    


        


            


            

        

        


            

                <img src="../assets/404.png" alt="">
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'notfound',
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            

                .box {
            

        

    

    


        


            


            

        

        


            

                display: flex;
            

        

    

    


        


            


            

        

        


            

                flex-direction: column;
            

        

    

    


        


            


            

        

        


            

                justify-content: center;
            

        

    

    


        


            


            

        

        


            

                align-items: center;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

 4.准备图片素材（所有素材可私信博主获取）

 5.所有准备工作做完现在开始我们的文件配置

 1.下载与导入vue-router

• npm i vue-router@3.6.5

• 导入vue-router (在main.js中)

    


        


            


            

        

        


            

                //main.js中导入
            

        

    

    


        


            


            

        

        


            

                // 0.导入路由
            

        

    

    


        


            


            

        

        


            

                import VueRouter from 'vue-router'
            

        

    

    


        


            


            

        

        


            

                // 使用vue的插件，都需要调用Vue.use()
            

        

    

    


        


            


            

        

        


            

                Vue.use(VueRouter)
            

        

    

2.导入组件

@符号代表 /src 文件夹的绝对路径，在脚手架中文件比较多的时候，使用这个@符号会更加的方便

 在main.js中导入

    


        


            


            

        

        


            

                // 导入组件
            

        

    

    


        


            


            

        

        


            

                import find from '@/views/find.vue'
            

        

    

    


        


            


            

        

        


            

                import friend from '@/views/friend.vue'
            

        

    

    


        


            


            

        

        


            

                import my from '@/views/my.vue'
            

        

    

    


        


            


            

        

        


            

                import notfound from '@/views/notfound.vue'
            

        

    

3.创建路由规则

路由规则作用： 设置 url 和 组件 对应的规则

 在main.js中写入

    


        


            


            

        

        


            

                // 路由规则
            

        

    

    


        


            


            

        

        


            

                const routes = [
            

        

    

    


        


            


            

        

        


            

                { path: '/find', component: find },
            

        

    

    


        


            


            

        

        


            

                { path: '/friend', name: 'friend', component: friend },
            

        

    

    


        


            


            

        

        


            

                { path: '/my', component: my },
            

        

    

    


        


            


            

        

        


            

                { path: '/notfound', component: notfound },
            

        

    

    


        


            


            

        

        


            

                ]
            

        

    

4.创建路由对象

路由对象： 帮你管理这些路由规则

 在main.js中写入

    


        


            


            

        

        


            

                // 创建路由对象
            

        

    

    


        


            


            

        

        


            

                const router = new VueRouter({
            

        

    

    


        


            


            

        

        


            

                routes// (缩写) 相当于 routes: routes
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

 5.挂载路由到根组件

挂载到根组件作用：让你的整个应用都有路由功能

 在main.js中写入

    


        


            


            

        

        


            

                // 挂载路由到根组件
            

        

    

    


        


            


            

        

        


            

                new Vue({
            

        

    

    


        


            


            

        

        


            

                router,
            

        

    

    


        


            


            

        

        


            

                render: h => h(App)
            

        

    

    


        


            


            

        

        


            

                }).$mount('#app')
            

        

    

6.在页面写路由导航router-link

作用与a标签一样实现跳转，好处：当点击链接的时候自带一个专属类名 

在App.vue中我们将传统的a标签进行替换：

替换a标签原因：便于我们做专属效果 

 我们选中点击的超链接做触发效果：

 7在页面写路由出口router-view

占位盒子，用于渲染路由匹配到的组件

（<router-view> : 是vue内置的一个组件,会自动替换成路由匹配的组件 ）

好了一个最最最基本的路由就被我们制作完成啦！下面我们来看看效果：

上述的操作有些许麻烦，下面我们来使用我们开发中常用的自动配置方法

②自动配置（推荐使用）

创建脚手架方式与手动配置类似，唯一不同是此处必须选择Router

对比手动模式：

 此刻：脚手架已经帮我们创建好了Router路由不需要我们下载与导入vue-router了

只需要写：

1. 导入组件
2. 配置路由规则
3. 路由导航
4. 路由出口

并且为了进一步的封装我们的配置信息，我们的配置代码将写在router/index.js下，不再是全部写在main.js下。

1.导入组件（index.js中）

    


        


            


            

        

        


            

                import find from '@/views/find.vue'
            

        

    

    


        


            


            

        

        


            

                import friend from '@/views/friend.vue'
            

        

    

    


        


            


            

        

        


            

                import my from '@/views/my.vue'
            

        

    

    


        


            


            

        

        


            

                import notfound from '@/views/notfound.vue'
            

        

    

2.配置路由规则（index.js中）

    


        


            


            

        

        


            

                { path: '/find', component: find },
            

        

    

    


        


            


            

        

        


            

                { path: '/friend', name: 'friend', component: friend },
            

        

    

    


        


            


            

        

        


            

                { path: '/my', component: my },
            

        

    

    


        


            


            

        

        


            

                { path: '/notfound', component: notfound }
            

        

    

 3.路由导航（直接cv我们之前的App.vue文件）

    


        


            


            

        

        


            

                      <router-link to="/find">发现音乐</router-link>
            

        

    

    


        


            


            

        

        


            

                      <router-link to="/my">我的音乐</router-link>
            

        

    

    


        


            


            

        

        


            

                      <router-link to="/friend">朋友</router-link>
            

        

    

 4.路由出口（App.vue中）

    


        


            


            

        

        


            

                <div class="top">
            

        

    

    


        


            


            

        

        


            

                <router-view></router-view>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

效果查看：

总结手动自动配置区别：

自动配置省去了一些固定不变的操作，我们不需要写繁琐且固定的代码，只需要写不同的代码。且代码书写的位置都给我们设置好了，我们直接遵守该规范书写代码即可

三、路由重定向与二级路由

1.路由重定向

路由重定向官方文档：重定向和别名 | Vue Router

• 重定向应用场景： 页面输入根路径/ , 自动跳转到首页

• 注意点 : 重定向只是修改路径， 还需要单独去设置路由匹配规则

重定向命令：

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                path: '/',
            

        

    

    


        


            


            

        

        


            

                /* 
            

        

    

    


        


            


            

        

        


            

                 (1)重定向只是修改页面路径。  输入 / 会重定向到 /路径
            

        

    

    


        


            


            

        

        


            

                 (2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向，还需要单独设置匹配规则
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                redirect: "路径"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

1. 就拿我们刚才创建的举例：

 实现效果：当我在浏览器中打开的时候我没有输入任何路径，vue自动帮我们跳转到了 my.vue这个页面组件

 2.也可以利用重定向来设置当我们路径错误提示404页面：

实现效果：当我任意输入没有匹配的路径，自动帮我们跳转到了notfound.vue这个组件

2.二级路由

实现页面中存在第二级的跳转

写法(拿我们上述的案例实操，需要素材可私信博主喔)：

①在index.js中引入

    


        


            


            

        

        


            

                // 导入二级路由
            

        

    

    


        


            


            

        

        


            

                import Ranking from '@/views/second/Ranking.vue'
            

        

    

    


        


            


            

        

        


            

                import Recommend from '@/views/second/Recommend.vue'
            

        

    

    


        


            


            

        

        


            

                import SongList from '@/views/second/SongList.vue'
            

        

    

②在需要引用的组件中使用：

    


        


            


            

        

        


            

                //格式：
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                path: '路径', component: 组件名, children: [
            

        

    

    


        


            


            

        

        


            

                //此处填写二级路由的路径信息
            

        

    

    


        


            


            

        

        


            

                ]
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                path: '/find', component: find, children: [
            

        

    

    


        


            


            

        

        


            

                {path:'/',redirect:'/SongList'},
            

        

    

    


        


            


            

        

        


            

                { path: '/Ranking', component: Ranking },
            

        

    

    


        


            


            

        

        


            

                { path: '/Recommend', component: Recommend },
            

        

    

    


        


            


            

        

        


            

                { path: '/SongList', component: SongList }
            

        

    

    


        


            


            

        

        


            

                ]
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

③写路由导航与出口

 查看效果：

 可以看到：当我们点击一级路由之后，我们还可以点击二级路由到我们的专属页面中

 四、路由跳转传参

有两种跳转传参方式：

• 声明式导航
• 编程式导航

1.声明式导航：

①query写法：

在路径中加参数信息即可

      <router-link to="/路径?参数名=参数值&参数名=参数值</router-link>

接收信息：

在触发的组件中书写{{ $route.query.属性名}}接收

 举个例子：

②params写法：

在index.jsx文件中写：参数名。在需要传递的路由路径中写参数值

接收信息：

在触发的组件中书写{{ $route.params.属性名}}接收

 实现效果：

2.编程式导航

①query写法:

结构：

    


        


            


            

        

        


            

                this.$router.push({
            

        

    

    


        


            


            

        

        


            

                path: '/路径',
            

        

    

    


        


            


            

        

        


            

                query: { 属性名: '属性值'}
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

接收信息：

在触发的组件中书写{{ $route.query.属性名}}接收

举个例子：

 ②params写法

结构:

    


        


            


            

        

        


            

                this.$router.push({
            

        

    

    


        


            


            

        

        


            

                name: '我们注册路径的组件名',//写path获取不到值！！！
            

        

    

    


        


            


            

        

        


            

                query: { 属性名: '属性值'}
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

 注意点:写path获取不到值，需要用name

接收信息：

在触发的组件中书写{{ $route.params.属性名}}接收

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

目录

1、界面效果

2、界面分析

2.1、整体结构

2.2、标题

2.3、表单

2.4、按钮

3、代码实现

3.1、标题区域布局

3.2、表单区域

3.2.1、祝福语

3.2.2、红包数量

3.2.3、红包总金额

3.2.4、余额支付

3.3、确认按钮区域

4、完整代码

5、基础知识点

1、界面效果

• 完成效果

• C站发红包界面 

2、界面分析

2.1、整体结构

上部分为标题、中间为表单、底部为确定按钮

2.2、标题

底部背景、标题文本、右上角关闭按钮

2.3、表单

祝福语文本、红包数量文本、红包总金额、当前余额文本显示、以及前往充值按钮

2.4、按钮

左边为需支付金额显示，右边为取消和确定按钮

3、代码实现

3.1、标题区域布局

1）背景图片

图片宽度380px像素，高度56px像素

2）背景图片自动填充

布局一个div，宽度为400px像素，高度为56px像素，然后再设置背景图片样式，由于图片本身宽度小于div宽度，div会多出20px像素，图片会自动填充，默认效果如下

    


        


            


            

        

        


            

                <div style="width:400px;height:56px;background:url(/1674461966454.jpg);background-size: 100%;">
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

 3）图片百分比显示

再给div设置背景百分比缩放显示，效果如下

background-size: 100%;

 4）文本

布局一个span标签，显示"添加红包"文本，白色黑体，18号字体，加粗，左对齐，且左边距20px像素。并设置div标签56px像素垂直居中样式，效果如下

5）关闭按钮

在右上角添加一个关闭按钮，一般可以设置一个svg标签图标，设置高28px，宽36px

• base64编码图标

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC

• 错位布局

设置相对定位position样式，位于右上角。它所在的父级就要设置绝对定位relative。这样关闭按钮图标就会以它所在的父级定位，否则可能会布局错位，比如下面错位效果

•  正确布局

• 样式代码

    


        


            


            

        

        


            

                <style type="text/css">
            

        

    

    


        


            


            

        

        


            

                 .title { width: 400px; height: 56px; background: url(/1674461966454.jpg); background-size: 100%; line-height: 56px;position:relative; }
            

        

    

    


        


            


            

        

        


            

                 .title-text { font-size: 18px; font-weight: bold; color: #fff; font-family: 黑体; margin-left: 20px; }
            

        

    

    


        


            


            

        

        


            

                 .close { position: absolute; top: 0px; right: 0px; width: 36px; height: 28px; }
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <div class="title">
            

        

    

    


        


            


            

        

        


            

                 <span class="title-text">添加红包</span>
            

        

    

    


        


            


            

        

        


            

                 <img class="close" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC" alt="">
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2、表单区域

3.2.1、祝福语

1）组成元素

红色星号、文本、输入文本框、刷新文本按钮

2）calc函数

它属于css3的功能，calc() 函数用于动态计算长度值。对于布局非常有作用。

需要特别注意，函数内的参数值前后都需要保留一个空格，例如：width: calc(100% - 40px)；

3）刷新小图标

样式设置16x16高宽度

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=

4）文本框默认高亮

input输入文本框默认点击选中会有一个高亮的效果，可以设置样式去掉

outline:none;

5）随机文本

设置随机祝福语文本值，可设置js全局数组参数变量保存。

并且给右边的刷新按钮绑定点击事件，然后在事件内使用随机函数进行随机显示

• 交互代码

    


        


            


            

        

        


            

                <script type="text/javascript">
            

        

    

    


        


            


            

        

        


            

                 $(function () {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                  // 祝福语
            

        

    

    


        


            


            

        

        


            

                  var labelText = ['成就一亿技术人!', '节日快乐', 'Hello World', '新春大吉!', '大吉大利', 'Bug Free'];
            

        

    

    


        


            


            

        

        


            

                  $('.cl-input img').click(function () {
            

        

    

    


        


            


            

        

        


            

                  // Math.random() - 随机函数会产生0~1之间的值
            

        

    

    


        


            


            

        

        


            

                  var index = parseInt(Math.random() * labelText.length);
            

        

    

    


        


            


            

        

        


            

                  var text = labelText[index];
            

        

    

    


        


            


            

        

        


            

                  $('.cl-input input').val(text);
            

        

    

    


        


            


            

        

        


            

                  });
            

        

    

    


        


            


            

        

        


            

                 });
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

• 效果如下

• 布局代码

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>祝福语</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <input placeholder="请填写红包祝福语或标题" value="成就一亿技术人!" />
            

        

    

    


        


            


            

        

        


            

                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=" alt="">
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2.2、红包数量

布局和祝福语一样，刷新按钮换成了单位文本。

这里文本框有个离开焦点事件，如果判断没有输入值，那么提示”请输入数量"，并且红包数量只能是正整数，文本框也变为红色边框，默认则为蓝色边框

• 布局效果

• 布局代码

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>红包数量</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <input placeholder="请填写红包数量" value="" />
            

        

    

    


        


            


            

        

        


            

                  <span>个</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

•  交互效果

• 交互代码 

    


        


            


            

        

        


            

                $("#txtCount").blur(function () {
            

        

    

    


        


            


            

        

        


            

                 txtCount = $(this).val();
            

        

    

    


        


            


            

        

        


            

                 if (txtCount == undefined || txtCount == null || txtCount == '' || txtCount.trim() == '') {
            

        

    

    


        


            


            

        

        


            

                  $("i", $(this).parent()).show().html('请输入数字！');
            

        

    

    


        


            


            

        

        


            

                  $(this).parent().addClass('red-border');
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                 else {
            

        

    

    


        


            


            

        

        


            

                  if (txtCount <= 0) {
            

        

    

    


        


            


            

        

        


            

                  $("i", $(this).parent()).show().html('请输入有效数字格式！');
            

        

    

    


        


            


            

        

        


            

                  $(this).parent().addClass('red-border');
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                  else if (!isNaN(txtCount)) {
            

        

    

    


        


            


            

        

        


            

                  $("i", $(this).parent()).hide();
            

        

    

    


        


            


            

        

        


            

                  $(this).parent().removeClass('red-border');
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                  else {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                });
            

        

    




    

3.2.3、红包总金额

布局和前面一样，这就是前端布局的魅力，有很多可以重用的东西

• 布局效果

• 布局代码 

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>红包总金额</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <input placeholder="请填写红包总金额" value="" />
            

        

    

    


        


            


            

        

        


            

                  <span>元</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2.4、余额支付

这里的布局和前面稍微多点东西，布局差不多。

这里只做读取展示用，也可以用input输入文本框，设置默认只读即可

• 布局效果

• 布局代码 

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>余额支付</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <label>当前余额：<b>51.25</b> 元</label>
            

        

    

    


        


            


            

        

        


            

                  <span class="span">前往充值 > </span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2.5、文本边框交互逻辑

当点击文本框时，先判断是否已经提示无效信息，也就是已经有红色边框，有则不显示蓝色边框，没有则显示蓝色边框。当离开文本框焦点，那么则移除蓝色边框

• 交互效果

• 交互代码

    


        


            


            

        

        


            

                // 文本框点击事件
            

        

    

    


        


            


            

        

        


            

                $('.cl-input input').click(function () {
            

        

    

    


        


            


            

        

        


            

                var className = $(this).parent().attr('class');
            

        

    

    


        


            


            

        

        


            

                if (className.indexOf('red-border') < 0) {
            

        

    

    


        


            


            

        

        


            

                $(this).parent().addClass('blue-border');
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }).blur(function () {
            

        

    

    


        


            


            

        

        


            

                $(this).parent().removeClass('blue-border');
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

3.3、确认按钮区域

1）支付额文本

这里布局左定位，金额数字加红色字体

2）取消和确认按钮

取消按钮鼠标移动上去边框变深，直接使用css的hover属性即可完成。

确认按钮的效果使用同样的方式

3）布局效果

 4）布局代码

    


        


            


            

        

        


            

                <!--按钮-->
            

        

    

    


        


            


            

        

        


            

                <div class="button">
            

        

    

    


        


            


            

        

        


            

                 <div class="price">
            

        

    

    


        


            


            

        

        


            

                  <span>需支付：</span>
            

        

    

    


        


            


            

        

        


            

                  <span id="priceSpan" style="font-size:20px;color:#f00;">0.00</span>
            

        

    

    


        


            


            

        

        


            

                  <span>元</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="btn">
            

        

    

    


        


            


            

        

        


            

                  <div class="btnCancel">
            

        

    

    


        


            


            

        

        


            

                  <span>取消</span>
            

        

    

    


        


            


            

        

        


            

                  </div>
            

        

    

    


        


            


            

        

        


            

                  <div class="btnOk not-allowed">
            

        

    

    


        


            


            

        

        


            

                  <span>确定</span>
            

        

    

    


        


            


            

        

        


            

                  </div>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    




    

5）交互代码

    


        


            


            

        

        


            

                // 红包个数
            

        

    

    


        


            


            

        

        


            

                var txtCount = 0;
            

        

    

    


        


            


            

        

        


            

                var txtPrice = 0;
            

        

    

    


        


            


            

        

        


            

                $("#txtCount").keyup(function () {
            

        

    

    


        


            


            

        

        


            

                 txtCount = $(this).val();
            

        

    

    


        


            


            

        

        


            

                 $("#priceSpan").html(txtCount * txtPrice);
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 红包总金额
            

        

    

    


        


            


            

        

        


            

                $("#txtPrice").keyup(function () {
            

        

    

    


        


            


            

        

        


            

                 txtPrice = $(this).val();
            

        

    

    


        


            


            

        

        


            

                 $("#priceSpan").html(txtPrice);
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

4、完整代码

红包数量和红包金额那里还有几个交互和逻辑判断，有兴趣的小伙伴可以自己实现下，有疑问的可咨询了解

完整代码可以查看gitCode：小5聊 / Csdn Red Bag Html · GitCode

5、基础知识点

总结：前端布局，要玩出花样和效果，还是需要点艺术天赋。总之，挺有趣的，刚入门可能会觉得比较难，当你熟练之后，还是挺有趣的！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司