diff --git a/front-end/mall4m/app.js b/front-end/mall4m/app.js index dd66751..735b006 100644 --- a/front-end/mall4m/app.js +++ b/front-end/mall4m/app.js @@ -1,25 +1,32 @@ -//app.js -var http = require("utils/http.js"); +// app.js 这是小程序应用的入口文件，用于定义整个小程序的全局配置、生命周期函数以及共享的数据等 + +var http = require("utils/http.js"); // 引入名为http.js的工具模块，可能用于处理网络请求等相关功能 + App({ - onLaunch: function () { - console.log('mall4j.v230313') - // http.getToken(); - // wx.getSetting({ - // success(res) { - // if (!res.authSetting['scope.userInfo']) { - // wx.navigateTo({ - // url: '/pages/login/login', - // }) - // } - // } - // }) - }, - globalData: { - // 定义全局请求队列 - requestQueue: [], - // 是否正在进行登陆 - isLanding: true, - // 购物车商品数量 - totalCartCount: 0 - } + // onLaunch是小程序的生命周期函数，在小程序初始化完成时触发 + onLaunch: function () { + console.log('mall4j.v230313'); // 在控制台打印出一个标识字符串，可能用于版本之类的标记 + // http.getToken(); // 原本可能是用于获取令牌（token）的调用，目前被注释掉了，也许暂时不需要在启动时获取或者功能还未完善 + + // 以下是获取用户授权设置信息的代码块 + wx.getSetting({ + success(res) { + // 判断用户是否已经授权了'scope.userInfo'（用户信息相关权限），如果没有授权 + if (!res.authSetting['scope.userInfo']) { + // 则跳转到名为'/pages/login/login'的页面，引导用户进行登录授权操作 + wx.navigateTo({ + url: '/pages/login/login', + }) + } + } + }) + }, + globalData: { + // 定义全局请求队列，可用于存放待处理的请求等相关操作，初始化为一个空数组 + requestQueue: [], + // 用于标记是否正在进行登录操作，初始值设为true，后续可根据实际登录状态进行修改 + isLanding: true, + // 用于记录购物车中的商品总数量，初始值设为0，在购物车相关操作时可更新这个值 + totalCartCount: 0 + } }) \ No newline at end of file diff --git a/front-end/mall4m/components/coupon/coupon.js b/front-end/mall4m/components/coupon/coupon.js index 9f80b77..550db1d 100644 --- a/front-end/mall4m/components/coupon/coupon.js +++ b/front-end/mall4m/components/coupon/coupon.js @@ -1,63 +1,92 @@ var http = require('../../utils/http.js'); +// 定义一个微信小程序的组件 Component({ /** * 组件的属性列表 + * 用于接收外部传入的各种数据，来控制组件的展示和行为等 */ properties: { + // 优惠券相关信息的对象，包含如couponId等具体详情数据 item: Object, + // 数字类型，可能用于区分优惠券的类型等，具体用途需结合业务场景判断 type: Number, + // 布尔类型，可能用于判断是否处于某种订单相关的场景等，具体由外部传入决定 order: Boolean, + // 布尔类型，用于判断优惠券是否可使用，外部传入设置该状态 canUse: Boolean, + // 数字类型，可能表示优惠券的序号或者索引等，具体依业务而定 index: Number, + // 数字类型，也许和展示时间相关的类型区分有关，具体功能要看业务逻辑 showTimeType: Number }, /** * 组件的初始数据 + * 在这里初始化组件内部使用的数据状态 */ data: { + // 初始设置stsType的值为4，具体含义可能和后续的业务逻辑相关，比如商品分类筛选等 stsType: 4 - }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 - attached: function() { - //console.log(this.data.item); + attached: function () { + // 打印当前组件中data里的item数据，方便调试查看传入的优惠券相关信息，可根据实际需求决定是否保留该语句 + // console.log(this.data.item); }, /** * 组件的方法列表 + * 定义了组件内可调用的各种方法，用于实现不同的业务功能，如操作优惠券等 */ methods: { + // 接收优惠券的方法 receiveCoupon() { + // 获取当前组件中data里item对象的couponId属性值，作为要接收的优惠券的ID var couponId = this.data.item.couponId; + // 使用引入的http模块发起一个POST请求，向服务端请求接收优惠券 http.request({ + // 请求的接口地址，用于接收优惠券的服务端接口 url: "/p/myCoupon/receive", + // 请求方法为POST method: "POST", + // 将获取到的优惠券ID作为请求的数据发送给服务端，此处可能需根据服务端要求调整格式，比如包装成对象等 data: couponId, callBack: () => { + // 获取当前组件中的优惠券对象（此处可能是为了更新其相关状态） var coupon = this.data.item; + // 将优惠券的可接收状态设置为false，表示已接收 coupon.canReceive = false; + // 通过setData更新组件中data里的item数据，从而更新组件的展示状态等 this.setData({ item: coupon }) } }) }, + // 查看优惠券的方法，会触发一个名为'checkCoupon'的自定义事件，并传递相关数据 checkCoupon(e) { + // 触发名为'checkCoupon'的自定义事件，并传递当前组件的索引（之前定义的index属性），该语句被注释掉了，可能有其他考虑，比如更换了传递数据的方式 // this.triggerEvent('checkCoupon', this.data.index); + // 触发名为'checkCoupon'的自定义事件，传递包含当前点击元素的优惠券ID（从事件对象的dataset中获取）的对象，用于在外部处理查看优惠券的相关逻辑 this.triggerEvent('checkCoupon', { couponId: e.currentTarget.dataset.couponid }); }, /** - * 立即使用 + * 立即使用优惠券的方法 + * 用于导航到相应的商品分类页面，并携带优惠券相关信息作为参数，以展示可使用优惠券的商品等 */ useCoupon() { + // 构建要导航到的页面地址，先设置基础的商品分类页面路径，并添加stsType参数（初始值为4，有其特定业务含义） var url = '/pages/prod-classify/prod-classify?sts=' + this.data.stsType; + // 获取当前组件中data里item对象的couponId属性值，作为要传递的优惠券ID var id = this.data.item.couponId; + // 设置页面标题为"优惠券活动商品"，用于在导航到的页面展示等 var title = "优惠券活动商品"; + // 如果获取到了优惠券ID，则将其和标题作为参数添加到页面地址后面，方便目标页面根据这些参数展示相应内容 if (id) { url += "&tagid=" + id + "&title=" + title; } + // 使用微信小程序的导航API，跳转到构建好的页面地址对应的页面 wx.navigateTo({ url: url }) diff --git a/front-end/mall4m/components/coupon/coupon.wxml b/front-end/mall4m/components/coupon/coupon.wxml index d34e46c..663b72d 100644 --- a/front-end/mall4m/components/coupon/coupon.wxml +++ b/front-end/mall4m/components/coupon/coupon.wxml @@ -1,30 +1,49 @@ + - - - ￥ - {{item.reduceAmount}} + + + + + + ￥ + + {{item.reduceAmount}} + + + + + {{item.couponDiscount}}折 + + + + 满{{item.cashCondition}}元可用 + - - {{item.couponDiscount}}折 + + + + + + {{item.suitableProdType==0?'通用':'商品'}} {{item.suitableProdType==0?'全场通用':'指定商品可用'}} + + + + + 领券{{item.validDays}}天后失效 + + {{item.startTime}}~{{item.endTime}} + + 立即领取 + + 立即使用 + + + + + - - 满{{item.cashCondition}}元可用 - - - - - {{item.suitableProdType==0?'通用':'商品'}} {{item.suitableProdType==0?'全场通用':'指定商品可用'}} - - - 领券{{item.validDays}}天后失效 - {{item.startTime}}~{{item.endTime}} - 立即领取 - 立即使用 - - - - - - - + + + + \ No newline at end of file diff --git a/front-end/mall4m/components/coupon/coupon.wxss b/front-end/mall4m/components/coupon/coupon.wxss index 1b3ab14..6bc47b3 100644 --- a/front-end/mall4m/components/coupon/coupon.wxss +++ b/front-end/mall4m/components/coupon/coupon.wxss @@ -1,118 +1,220 @@ -.coupon-item{ +/* 优惠券项目整体的样式类，用于设置优惠券的整体外观和布局等相关样式 */ +.coupon-item { + /* 设置外边距，上下外边距为15px，左右外边距为0 */ margin: 15px 0; + /* 设置相对定位，方便其内部元素基于它进行定位 */ position: relative; - box-shadow: 1px 1px 3px rgba(0,0,0,0.15); + /* 添加阴影效果，水平和垂直方向偏移1px，模糊半径3px，颜色透明度为0.15的黑色阴影 */ + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); + /* 设置高度为95px */ height: 95px; + /* 设置背景颜色为白色 */ background: #fff; } -.coupon-item .left{ - float: left; + +/* 优惠券项目中左边部分的样式类，用于设置优惠券左边区域的样式，比如颜色、布局等 */ +.coupon-item.left { + /* 设置左浮动，使其在水平方向上向左排列 */ + float: left; + /* 设置文字颜色为白色 */ color: #fff; + /* 设置文本居中对齐 */ text-align: center; + /* 添加左边框，为1px的虚线，颜色为白色 */ border-left: 1px dashed #fff; + /* 设置上下内边距为20px，左右内边距为0 */ padding: 20px 0; - background: -webkit-gradient(linear,left top,right top,from(#F45C43),to(#eb2444)); - background: -o-linear-gradient(left,#F45C43,#eb2444); - background: linear-gradient(left,#F45C43,#eb2444); - background: -webkit-linear-gradient(left,#F45C43,#eb2444); + /* 设置背景渐变，从#F45C43到#eb2444的线性渐变（webkit内核浏览器兼容写法） */ + background: -webkit-gradient(linear, left top, right top, from(#F45C43), to(#eb2444)); + /* 设置背景渐变，从#F45C43到#eb2444的线性渐变（opera浏览器兼容写法） */ + background: -o-linear-gradient(left, #F45C43, #eb2444); + /* 设置背景渐变，从#F45C43到#eb2444的线性渐变（标准写法） */ + background: linear-gradient(left, #F45C43, #eb2444); + /* 设置背景渐变，从#F45C43到#eb2444的线性渐变（webkit内核浏览器另一种兼容写法） */ + background: -webkit-linear-gradient(left, #F45C43, #eb2444); + /* 设置宽度为260rpx（rpx是微信小程序中的自适应单位，会根据屏幕宽度自动换算） */ width: 260rpx; + /* 设置高度为55px */ height: 55px; } -.coupon-item .left .num{ - font-weight:600; - font-size:36rpx; - height:70rpx; - line-height:70rpx; - font-family:arial; + +/* 优惠券项目左边部分中金额数字的样式类，用于设置金额数字相关的样式，比如字体、大小、行高等 */ +.coupon-item.left.num { + /* 设置字体加粗，权重为600 */ + font-weight: 600; + /* 设置字体大小为36rpx */ + font-size: 36rpx; + /* 设置高度为70rpx */ + height: 70rpx; + /* 设置行高为70rpx，使文字垂直居中 */ + line-height: 70rpx; + /* 设置字体为arial字体 */ + font-family: arial; } -.coupon-item .left .num .coupon-price{ - font-size: 72rpx; + +/* 优惠券项目左边部分中金额数字里优惠券价格的样式类，用于对优惠券价格的字体等样式进行单独设置 */ +.coupon-item.left.num.coupon-price { + /* 设置字体大小为72rpx */ + font-size: 72rpx; + /* 设置行高为72rpx */ line-height: 72rpx; - display: inline-block; + /* 设置为行内块元素，方便在同一行内进行布局调整等 */ + display: inline-block; + /* 设置字体为arial字体 */ font-family: arial; } -.coupon-item .left .condition{ + +/* 优惠券项目左边部分中使用条件的样式类，用于设置优惠券使用条件相关的文本样式，比如字体、大小、溢出处理等 */ +.coupon-item.left.condition { + /* 设置字体大小为28rpx */ font-size: 28rpx; + /* 设置行高为28rpx */ line-height: 28rpx; + /* 设置为块级元素 */ display: block; + /* 文本超出一行时不换行 */ white-space: nowrap; + /* 超出部分隐藏 */ overflow: hidden; + /* 超出部分用省略号显示 */ text-overflow: ellipsis; + /* 设置左右内边距各2px */ padding: 0 2px; + /* 设置字体为arial字体 */ font-family: arial; } -.coupon-item .right{ - margin-left: 280rpx; + +/* 优惠券项目中右边部分的样式类，用于设置优惠券右边区域的样式，比如边距、布局等 */ +.coupon-item.right { + /* 设置左边距为280rpx，使其与左边部分隔开一定距离 */ + margin-left: 280rpx; + /* 设置上下左右内边距为5px */ padding: 5px; + /* 设置相对定位，方便其内部元素基于它进行定位 */ position: relative; } -.coupon-item .right .c-des{ - height: 30px; + +/* 优惠券项目右边部分中描述信息的样式类，用于设置描述信息相关的样式，比如高度、字体、溢出处理等 */ +.coupon-item.right.c-des { + /* 设置高度为30px */ + height: 30px; + /* 设置字体大小为26rpx */ font-size: 26rpx; + /* 设置行高为30px */ line-height: 30px; + /* 超出部分隐藏 */ overflow: hidden; + /* 设置字体加粗，权重为600 */ font-weight: 600; } -.coupon-item .right .c-des .c-type{ - font-size: 24rpx; + +/* 优惠券项目右边部分中描述信息里类型的样式类，用于设置优惠券类型相关的样式，比如字体、背景色、圆角等 */ +.coupon-item.right.c-des.c-type { + /* 设置字体大小为24rpx */ + font-size: 24rpx; + /* 设置背景颜色为淡红色系，用于突出显示类型 */ background: #fdf0f0; + /* 设置文字颜色为红色系，与背景形成对比 */ color: #eb2444; + /* 设置圆角半径为8px，使元素看起来更圆润 */ border-radius: 8px; - padding:3px 10px; + /* 设置上下左右内边距分别为3px和10px */ + padding: 3px 10px; } -.coupon-item .right .c-date{ - font-size: 24rpx; - margin-top:25px; + +/* 优惠券项目右边部分中日期信息的样式类，用于设置日期相关的样式，比如字体、外边距等 */ +.coupon-item.right.c-date { + /* 设置字体大小为24rpx */ + font-size: 24rpx; + /* 设置上边距为25px，使其与上面的描述信息隔开一定距离 */ + margin-top: 25px; } -.coupon-item .right .c-date .c-data-info{ - font-family: arial; + +/* 优惠券项目右边部分中日期信息里具体数据信息的样式类，用于设置日期具体数据相关的样式，比如字体 */ +.coupon-item.right.c-date.c-data-info { + /* 设置字体为arial字体 */ + font-family: arial; } -.coupon-item .right .c-date .c-btn{ + +/* 优惠券项目右边部分中日期信息里按钮的样式类，用于设置按钮的通用样式，比如位置、字体、圆角、背景等 */ +.coupon-item.right.c-date.c-btn { + /* 设置绝对定位，使其可以精确地定位在父元素内的某个位置 */ position: absolute; - bottom:0; - right:10px; + /* 定位到底部，距离底部0距离 */ + bottom: 0; + /* 定位到右边，距离右边10px距离 */ + right: 10px; + /* 设置文字颜色为白色 */ color: #fff; + /* 设置字体大小为24rpx */ font-size: 24rpx; + /* 设置字体为arial字体 */ font-family: arial; + /* 设置圆角半径为14px，使按钮看起来更圆润 */ border-radius: 14px; - padding:3px 7px; - /* background: -webkit-gradient(linear,left top,right top,from(#6c96da),to(#6b83d7)); - background: -o-linear-gradient(left,#6c96da,#6b83d7); - background: linear-gradient(left,#6c96da,#6b83d7); - background: -webkit-linear-gradient(left,#6c96da,#6b83d7); */ + /* 设置上下左右内边距分别为3px和7px */ + padding: 3px 7px; + /* 设置背景渐变，从#6c96da到#6b83d7的线性渐变（webkit内核浏览器兼容写法），这里被注释掉了，可能有其他背景设置需求 */ + /* background: -webkit-gradient(linear, left top, right top, from(#6c96da), to(#6b83d7)); + background: -o-linear-gradient(left, #6c96da, #6b83d7); + background: linear-gradient(left, #6c96da, #6b83d7); + background: -webkit-linear-gradient(left, #6c96da, #6b83d7); */ + /* 设置背景颜色为红色系 */ background: #eb2444; + /* 设置边框为1px的实线，颜色为红色系 */ border: 1px solid #eb2444; } -.coupon-item .right .c-date .c-btn.get-btn{ - background: #fff; - border: 1px solid #eb2444; - color:#eb2444; +/* 优惠券项目右边部分中日期信息里获取按钮的样式类，用于对获取按钮这种特定按钮进行样式覆盖，比如背景、文字颜色等 */ +.coupon-item.right.c-date.c-btn.get-btn { + /* 设置背景颜色为白色 */ + background: #fff; + /* 设置边框为1px的实线，颜色为红色系 */ + border: 1px solid #eb2444; + /* 设置文字颜色为红色系 */ + color: #eb2444; } -.coupon-item.gray .left{ - background: #bbb; +/* 优惠券项目处于灰色状态时左边部分的样式类，用于对灰色状态下左边部分的背景等样式进行覆盖 */ +.coupon-item.gray.left { + /* 设置背景颜色为灰色 */ + background: #bbb; } -.coupon-item.gray .right .c-des .c-type{ - background: #bbb; +/* 优惠券项目处于灰色状态时右边部分中描述信息里类型的样式类，用于对灰色状态下类型的背景、文字颜色等样式进行覆盖 */ +.coupon-item.gray.right.c-des.c-type { + /* 设置背景颜色为灰色 */ + background: #bbb; + /* 设置文字颜色为白色 */ color: #fff; } -.coupon-item.gray .right .c-date .c-btn{ - display: none; +/* 优惠券项目处于灰色状态时右边部分中日期信息里按钮的样式类，用于隐藏灰色状态下的按钮 */ +.coupon-item.gray.right.c-date.c-btn { + /* 设置为不显示 */ + display: none; } -.coupon-item .tag-img{ - position: absolute; - top:0; - right:0; - width:120rpx; - height:120rpx; +/* 优惠券项目中标签图片的样式类，用于设置标签图片的位置、大小等样式 */ +.coupon-item.tag-img { + /* 设置绝对定位，方便精确放置在父元素内的某个位置 */ + position: absolute; + /* 定位到顶部，距离顶部0距离 */ + top: 0; + /* 定位到右边，距离右边0距离 */ + right: 0; + /* 设置宽度为120rpx */ + width: 120rpx; + /* 设置高度为120rpx */ + height: 120rpx; } -.coupon-item .sel-btn{ - position:absolute; - right:10px; - top:35px; -} +/* 优惠券项目中选择按钮的样式类，用于设置选择按钮的位置等样式 */ +.coupon-item.sel-btn { + /* 设置绝对定位，方便精确放置在父元素内的某个位置 */ + position: absolute; + /* 定位到右边，距离右边10px距离 */ + right: 10px; + /* 定位到顶部，距离顶部35px距离 */ + top: 35px; +} \ No newline at end of file diff --git a/front-end/mall4m/components/production/production.js b/front-end/mall4m/components/production/production.js index 6d25792..009b9fd 100644 --- a/front-end/mall4m/components/production/production.js +++ b/front-end/mall4m/components/production/production.js @@ -1,30 +1,40 @@ // components/production/production.js +// 定义一个小程序组件，使用Component函数来创建，组件在小程序中是可复用的独立模块，有自己的属性、数据和方法等 Component({ - /** - * 组件的属性列表 - */ - properties: { - item:Object, - sts:Number, - }, - + /** + * 组件的属性列表 + * 这里定义了组件外部可以传入的属性，相当于组件的输入参数，外部使用者可以通过设置这些属性来影响组件的展示或行为等。 + */ + properties: { + // item属性，类型为Object（对象），具体的对象结构和用途应该由组件的使用场景决定，外部可以传入一个对象数据给组件 + item: Object, + // sts属性，类型为Number（数字），同样其具体含义取决于组件的业务逻辑，外部传入一个数字值给组件 + sts: Number, + }, - /** - * 组件的初始数据 - */ - data: { - }, + /** + * 组件的初始数据 + * 这里定义组件内部私有的数据，在组件的生命周期内可以对这些数据进行修改、操作，初始时可以为空对象，后续可根据业务逻辑添加相应的数据。 + */ + data: { - /** - * 组件的方法列表 - */ - methods: { - toProdPage: function (e) { - var prodid = e.currentTarget.dataset.prodid; - wx.navigateTo({ - url: '/pages/prod/prod?prodid=' + prodid, - }) }, - } -}) + + /** + * 组件的方法列表 + * 这里定义了组件内部可以调用的方法，用于实现各种功能，比如响应事件、进行数据处理等。 + */ + methods: { + // toProdPage方法，用于处理跳转到产品详情页面的功能，通常是在某个用户交互事件触发时调用，比如点击某个元素等情况。 + toProdPage: function (e) { + // 从事件对象e的currentTarget.dataset中获取名为prodid的数据，这个数据应该是在页面元素上通过自定义数据属性（data-*）绑定的产品ID相关信息 + var prodid = e.currentTarget.dataset.prodid; + // 使用wx.navigateTo API进行页面跳转，跳转到名为'/pages/prod/prod'的页面，并将获取到的产品ID（prodid）作为查询参数传递过去， + // 这样目标页面可以根据这个参数获取并展示对应的产品详情信息。 + wx.navigateTo({ + url: '/pages/prod/prod?prodid=' + prodid, + }) + }, + } +}) \ No newline at end of file diff --git a/front-end/mall4m/components/production/production.wxml b/front-end/mall4m/components/production/production.wxml index 6e8639f..299872f 100644 --- a/front-end/mall4m/components/production/production.wxml +++ b/front-end/mall4m/components/production/production.wxml @@ -1,19 +1,32 @@ - - + + + + + - - + + + + {{item.prodName}} + {{item.prodCommNumber}}评价 {{item.positiveRating}}%好评 + - - 限时价 - ￥ - {{wxs.parsePrice(item.price)[0]}} - .{{wxs.parsePrice(item.price)[1]}} - + + + + 限时价 + + ￥ + + {{wxs.parsePrice(item.price)[0]}} + + .{{wxs.parsePrice(item.price)[1]}} + - + + \ No newline at end of file diff --git a/front-end/mall4m/components/production/production.wxss b/front-end/mall4m/components/production/production.wxss index 1224342..b2d5d6b 100644 --- a/front-end/mall4m/components/production/production.wxss +++ b/front-end/mall4m/components/production/production.wxss @@ -1,66 +1,112 @@ +/* 导入上级目录下的 app.wxss 文件，用于引入一些全局样式或基础样式设置，使当前样式文件可以复用其中的样式规则 */ @import "../../app.wxss"; + +/* 商品展示项（prod-items）的样式类，用于设置商品展示区域整体的样式，如宽度、布局、背景色、内边距等 */ .prod-items { - width: 375rpx; - float: left; - background: #fff; - padding-bottom: 20rpx; - box-sizing: border-box; + /* 设置宽度为 375rpx（rpx 是微信小程序中的自适应单位，会根据屏幕宽度自动换算） */ + width: 375rpx; + /* 设置左浮动，使其在水平方向上按照浮动规则排列 */ + float: left; + /* 设置背景颜色为白色 */ + background: #fff; + /* 设置底部内边距为 20rpx，用于和内部元素隔开一定距离等 */ + padding-bottom: 20rpx; + /* 设置盒模型为 border-box，这样设置内边距和边框不会增加元素的整体宽度 */ + box-sizing: border-box; } -prod:nth-child(2n-1) .prod-items { - padding: 20rpx 10rpx 10rpx 20rpx; +/* 选择奇数位置（2n - 1）的 prod 元素下的 prod-items 元素的样式规则，用于对奇数位置商品展示项设置不同的内边距样式 */ +prod:nth-child(2n - 1).prod-items { + /* 设置上、右、下、左的内边距分别为 20rpx、10rpx、10rpx、20rpx，以调整内部元素布局和间距 */ + padding: 20rpx 10rpx 10rpx 20rpx; } -prod:nth-child(2n) .prod-items { - padding: 20rpx 20rpx 10rpx 10rpx; +/* 选择偶数位置（2n）的 prod 元素下的 prod-items 元素的样式规则，用于对偶数位置商品展示项设置不同的内边距样式 */ +prod:nth-child(2n).prod-items { + /* 设置上、右、下、左的内边距分别为 20rpx、20rpx、10rpx、10rpx，以调整内部元素布局和间距 */ + padding: 20rpx 20rpx 10rpx 10rpx; } -.hot-imagecont .hotsaleimg { - width:345rpx; -height:345rpx; - +/* 商品展示项中热门图片容器（hot-imagecont）里图片（hotsaleimg）的样式类，用于设置商品图片的尺寸大小 */ +.hot-imagecont.hotsaleimg { + /* 设置图片宽度为 345rpx */ + width: 345rpx; + /* 设置图片高度为 345rpx */ + height: 345rpx; } -.hot-text .hotprod-text { - height: 76rpx; - font-size: 28rpx; - display: -webkit-box; - word-break: break-all; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - color: #000; +/* 商品展示项中热门文本（hot-text）里商品名称（hotprod-text）的样式类，用于设置商品名称相关的文本样式，如高度、字体大小、文本溢出处理等 */ +.hot-text.hotprod-text { + /* 设置高度为 76rpx */ + height: 76rpx; + /* 设置字体大小为 28rpx */ + font-size: 28rpx; + /* 使用-webkit-box 布局方式，这是一种弹性盒子布局的旧浏览器兼容写法，用于实现多行文本溢出省略显示的效果 */ + display: -webkit-box; + /* 允许单词在边界处断开换行，避免文本过长出现显示问题 */ + word-break: break-all; + /* 超出部分隐藏 */ + overflow: hidden; + /* 超出部分用省略号显示 */ + text-overflow: ellipsis; + /* 再次声明使用-webkit-box 布局方式，这是兼容写法的一部分 */ + display: -webkit-box; + /* 设置显示的行数为 2 行，结合前面的属性实现文本最多显示 2 行并溢出省略的效果 */ + -webkit-line-clamp: 2; + /* 设置盒子的排列方向为垂直方向，用于多行文本的布局控制 */ + -webkit-box-orient: vertical; + /* 设置文本颜色为黑色 */ + color: #000; } -.prod-items .hot-imagecont { - border-radius: 8rpx; - text-align: center; - font-size: 0; +/* 商品展示项中热门图片容器（hot-imagecont）的样式类，用于设置图片容器的样式，如圆角、文本对齐、字体大小等 */ +.prod-items.hot-imagecont { + /* 设置圆角半径为 8rpx，使图片容器看起来更圆润 */ + border-radius: 8rpx; + /* 设置文本居中对齐，对于图片容器内可能有的文本元素生效 */ + text-align: center; + /* 设置字体大小为 0，通常用于消除图片与其他内联元素之间的默认间距问题等 */ + font-size: 0; } -.prod-items .hot-text { - margin-top: 20rpx; +/* 商品展示项中热门文本（hot-text）的样式类，用于设置热门文本区域整体的外边距等样式，使其与上面的图片容器隔开一定距离 */ +.prod-items.hot-text { + /* 设置上边距为 20rpx，与上面的图片容器拉开距离 */ + margin-top: 20rpx; } -.prod-items .hot-text .prod-info { - font-size: 20rpx; - color: #777; - margin-top: 8rpx; +/* 商品展示项中热门文本（hot-text）里商品评价信息（prod-info）的样式类，用于设置商品评价相关的文本样式，如字体大小、颜色、外边距等 */ +.prod-items.hot-text.prod-info { + /* 设置字体大小为 20rpx */ + font-size: 20rpx; + /* 设置文本颜色为灰色系，用于和其他主要信息区分开来，体现辅助信息的感觉 */ + color: #777; + /* 设置上边距为 8rpx，与上面的商品名称等信息隔开一定距离 */ + margin-top: 8rpx; } -.prod-items .hot-text .prod-text-info { - position: relative; - height: 50rpx; - line-height: 70rpx; - font-family: Arial; +/* 商品展示项中热门文本（hot-text）里商品价格信息（prod-text-info）的样式类，用于设置商品价格信息区域整体的样式，如位置、高度、行高等 */ +.prod-items.hot-text.prod-text-info { + /* 设置相对定位，方便其内部元素基于它进行定位 */ + position: relative; + /* 设置高度为 50rpx */ + height: 50rpx; + /* 设置行高为 70rpx，用于调整文本在垂直方向上的位置等 */ + line-height: 70rpx; + /* 设置字体为 Arial 字体 */ + font-family: Arial; } -.prod-items .hot-text .prod-text-info .price { - color: #eb2444; +/* 商品展示项中热门文本（hot-text）里商品价格信息（prod-text-info）中价格（price）的样式类，用于设置价格文本的颜色，使其突出显示 */ +.prod-items.hot-text.prod-text-info.price { + /* 设置文本颜色为红色系，通常用于醒目地展示价格信息 */ + color: #eb2444; } -.deadline-price{ - font-size: 22rpx; - margin-right: 5rpx; + +/* 商品展示项中限时价（deadline-price）的样式类，用于设置限时价文本的字体大小、外边距等样式 */ +.deadline-price { + /* 设置字体大小为 22rpx */ + font-size: 22rpx; + /* 设置右边距为 5rpx，使其与旁边的价格等文本隔开一定距离 */ + margin-right: 5rpx; } \ No newline at end of file diff --git a/front-end/mall4v/src/App.vue b/front-end/mall4v/src/App.vue index 964ca7f..67a2a2c 100644 --- a/front-end/mall4v/src/App.vue +++ b/front-end/mall4v/src/App.vue @@ -1,12 +1,18 @@ + diff --git a/front-end/mall4v/src/assets/app.scss b/front-end/mall4v/src/assets/app.scss index 48d5832..8ad03c9 100644 --- a/front-end/mall4v/src/assets/app.scss +++ b/front-end/mall4v/src/assets/app.scss @@ -1,26 +1,31 @@ // 商品卡片信息的名称删除按钮组 -.card-prod-info-btn{ - font-size: 14px; - .prod-name{ - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - padding: 0 8px; +.card-prod-info-btn { + font-size: 14px; // 设置整个容器的基础字体大小为14像素 + + .prod-name { // 商品名称样式 + white-space: nowrap; // 强制在同一行内显示文本，不进行换行 + text-overflow: ellipsis; // 当文本溢出其容器时，用省略号（...）表示被截断的文本 + overflow: hidden; // 隐藏溢出容器的内容，与text-overflow配合使用以实现文本截断效果 + padding: 0 8px; // 为商品名称添加左右各8像素的内边距，使其与容器边缘保持适当距离 } - .del-btn{ - line-height: 20px; - text-align: right; - padding-right: 8px; - user-select: none; - span{ - color: #155bd4; - cursor: pointer; - &:hover{ - opacity: 0.8; + + .del-btn { // 删除按钮样式 + line-height: 20px; // 设置行高为20像素，确保按钮内的文本垂直居中对齐 + text-align: right; // 文本右对齐，使删除图标或文字靠右显示 + padding-right: 8px; // 为删除按钮右侧添加8像素的内边距，保证与其他元素有足够的间距 + user-select: none; // 禁止用户选中文本，改善用户体验，特别是对于交互性元素 + + span { // 删除按钮内部span标签的样式 + color: #155bd4; // 设置删除按钮文本颜色为蓝色，用于指示可点击状态 + cursor: pointer; // 更改鼠标指针为手型，提示用户该元素是可交互的 + + &:hover { // 当鼠标悬停在删除按钮上时 + opacity: 0.8; // 减少不透明度到80%，提供视觉反馈，表明元素处于悬停状态 } - &.disabled{ - opacity: 0.6; - cursor: not-allowed; + + &.disabled { // 当删除按钮具有.disabled类时（即禁用状态） + opacity: 0.6; // 进一步降低不透明度到60%，表示按钮不可用 + cursor: not-allowed; // 改变鼠标指针为禁止符号，明确传达按钮不可点击的状态 } } } diff --git a/front-end/mall4v/src/assets/scss/_base.scss b/front-end/mall4v/src/assets/scss/_base.scss index f2dde4d..68784ed 100644 --- a/front-end/mall4v/src/assets/scss/_base.scss +++ b/front-end/mall4v/src/assets/scss/_base.scss @@ -1,114 +1,110 @@ +/* 全局样式 */ +/* 设置所有元素及其伪元素的盒模型为包含padding和border */ *, *:before, *:after { box-sizing: border-box; } + +/* 设置body的基础样式 */ body { - font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; - font-size: 14px; - line-height: 1.15; - color: #303133; - background-color: #fff; + font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; /* 设置全局字体 */ + font-size: 14px; /* 默认字体大小 */ + line-height: 1.15; /* 行高 */ + color: #303133; /* 文字颜色 */ + background-color: #fff; /* 背景颜色 */ } + +/* 设置链接的基础样式 */ a { - color: mix(#fff, $--color-primary, 20%); - text-decoration: none; + color: mix(#fff, $--color-primary, 20%); /* 使用Sass混合函数设置链接颜色 */ + text-decoration: none; /* 移除默认下划线 */ + &:focus, - &:hover { - color: $--color-primary; - text-decoration: underline; + &:hover { /* 当链接被聚焦或悬停时 */ + color: $--color-primary; /* 改变链接颜色 */ + text-decoration: underline; /* 添加下划线 */ } } + +/* 设置图片的基础样式 */ img { - vertical-align: middle; - max-width: 100%; + vertical-align: middle; /* 图片垂直对齐方式 */ + max-width: 100%; /* 确保图片不会超出容器宽度 */ } -.el-cascader-menu { - .el-scrollbar__wrap { - overflow-y: auto !important; - width: 100% !important; - margin: 0 !important; - overflow: auto !important; - } +/* 修改Element UI级联菜单滚动条的行为 */ +.el-cascader-menu .el-scrollbar__wrap { + overflow-y: auto !important; /* 确保Y轴可以滚动 */ + width: 100% !important; /* 滚动内容占据全部宽度 */ + margin: 0 !important; /* 移除默认边距 */ + overflow: auto !important; /* 确保溢出内容可见 */ } -/* Utils ------------------------------- */ +/* 清除浮动 */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { - clear: both; + clear: both; /* 清除浮动影响 */ } - -/* Animation ------------------------------- */ +/* 定义淡入淡出动画 */ .fade-enter-active, .fade-leave-active { - transition: opacity .5s; + transition: opacity .5s; /* 动画过渡时间 */ } .fade-enter, .fade-leave-to { - opacity: 0; + opacity: 0; /* 初始和结束状态透明度 */ } - -/* Reset element-ui ------------------------------- */ -.site-wrapper { - .el-pagination { - text-align: right; - } +/* 重置Element UI分页组件的文本对齐 */ +.site-wrapper .el-pagination { + text-align: right; /* 分页组件右对齐 */ } - -/* Layout ------------------------------- */ +/* 布局 */ .site-wrapper { - position: relative; - min-width: 1180px; + position: relative; /* 相对于自身定位 */ + min-width: 1180px; /* 最小宽度 */ } - -/* Sidebar fold ------------------------------- */ +/* 侧边栏折叠时的样式调整 */ .site-sidebar--fold { .site-navbar__header, .site-navbar__brand, .site-sidebar, .site-sidebar__inner, .el-menu.site-sidebar__menu { - width: 64px; + width: 64px; /* 折叠后的宽度 */ } .site-navbar__body, .site-content__wrapper { - margin-left: 64px; + margin-left: 64px; /* 折叠后内容区的左边距 */ } - .site-navbar__brand { - &-lg { - display: none; - } - &-mini { - display: inline-block; - } + .site-navbar__brand-lg { + display: none; /* 隐藏大尺寸品牌标志 */ + } + .site-navbar__brand-mini { + display: inline-block; /* 显示迷你品牌标志 */ } .site-sidebar, .site-sidebar__inner { - overflow: initial; + overflow: initial; /* 恢复默认的溢出行为 */ } .site-sidebar__menu-icon { - margin-right: 0; - font-size: 20px; + margin-right: 0; /* 移除右边距 */ + font-size: 20px; /* 字体大小 */ } .site-content--tabs > .el-tabs > .el-tabs__header { - left: 64px; + left: 64px; /* 标签头部左侧位置 */ } } -// animation + +/* 侧边栏、导航栏等元素在切换时添加动画效果 */ .site-navbar__header, .site-navbar__brand, .site-navbar__body, @@ -118,48 +114,46 @@ img { .site-sidebar__menu-icon, .site-content__wrapper, .site-content--tabs > .el-tabs .el-tabs__header { - transition: inline-block .3s, left .3s, width .3s, margin-left .3s, font-size .3s; + transition: inline-block .3s, left .3s, width .3s, margin-left .3s, font-size .3s; /* 动画过渡 */ } - -/* Navbar ------------------------------- */ +/* 导航栏样式 */ .site-navbar { - position: fixed; + position: fixed; /* 固定定位 */ top: 0; right: 0; left: 0; - z-index: 1030; - height: 50px; - box-shadow: 0 2px 4px rgba(0, 0, 0, .08); - background-color: $navbar--background-color; + z-index: 1030; /* 层级 */ + height: 50px; /* 高度 */ + box-shadow: 0 2px 4px rgba(0, 0, 0, .08); /* 阴影效果 */ + background-color: $navbar--background-color; /* 背景颜色 */ - &--inverse { + &--inverse { /* 反色主题 */ .site-navbar__body { - background-color: transparent; + background-color: transparent; /* 逆向导航栏背景透明 */ } .el-menu { > .el-menu-item, > .el-submenu > .el-submenu__title { - color: #fff; + color: #fff; /* 白色文字 */ &:focus, &:hover { - color: #fff; - background-color: mix(#000, $navbar--background-color, 15%); + color: #fff; /* 悬停时保持白色 */ + background-color: mix(#000, $navbar--background-color, 15%); /* 混合背景色 */ } } > .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title { - border-bottom-color: mix(#fff, $navbar--background-color, 85%); + border-bottom-color: mix(#fff, $navbar--background-color, 85%); /* 活动项下划线颜色 */ } .el-menu-item i, .el-submenu__title i, .el-dropdown { - color: #fff; + color: #fff; /* 白色图标 */ } } .el-menu--popup-bottom-start { - background-color: $navbar--background-color; + background-color: $navbar--background-color; /* 下拉菜单背景 */ } } @@ -168,7 +162,7 @@ img { float: left; width: 230px; height: 50px; - overflow: hidden; + overflow: hidden; /* 导航栏头部 */ } &__brand { display: table-cell; @@ -181,7 +175,7 @@ img { text-align: center; text-transform: uppercase; white-space: nowrap; - color: #fff; + color: #fff; /* 品牌名称颜色 */ &-lg, &-mini { @@ -194,12 +188,12 @@ img { } } &-mini { - display: none; + display: none; /* 默认隐藏迷你品牌 */ } } &__switch { font-size: 18px; - border-bottom: none !important; + border-bottom: none !important; /* 移除底部边框 */ } &__avatar { border-bottom: none !important; @@ -220,7 +214,7 @@ img { position: relative; margin-left: 230px; padding-right: 15px; - background-color: #fff; + background-color: #fff; /* 导航栏主体背景 */ } &__menu { float: left; @@ -228,7 +222,7 @@ img { border-bottom: 0; &--right { - float: right; + float: right; /* 右对齐 */ } a:focus, a:hover { @@ -252,9 +246,7 @@ img { } } - -/* Sidebar ------------------------------- */ +/* 侧边栏样式 */ .site-sidebar { position: fixed; top: 50px; @@ -266,7 +258,7 @@ img { &--dark, &--dark-popper { - background-color: $sidebar--background-color-dark; + background-color: $sidebar--background-color-dark; /* 深色背景 */ .site-sidebar__menu.el-menu, > .el-menu--popup { background-color: $sidebar--background-color-dark; @@ -310,9 +302,7 @@ img { } } - -/* Content ------------------------------- */ +/* 内容区样式 */ .site-content { position: relative; padding: 15px; @@ -365,6 +355,7 @@ img { } } -.element-error-message-zindex{ - z-index:3000 !important; +/* 提升错误信息的层级 */ +.element-error-message-zindex { + z-index: 3000 !important; /* 确保错误信息显示在其他元素之上 */ } diff --git a/front-end/mall4v/src/assets/scss/_normalize.scss b/front-end/mall4v/src/assets/scss/_normalize.scss index 9bb2529..13e3319 100644 --- a/front-end/mall4v/src/assets/scss/_normalize.scss +++ b/front-end/mall4v/src/assets/scss/_normalize.scss @@ -2,14 +2,11 @@ /* Document ========================================================================== */ - /** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 1. 正确设置所有浏览器中的行高。 + * 2. 防止在 Windows Phone 的 IE 和 iOS 中发生方向变化后字体大小调整。 */ - - html { +html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ @@ -17,19 +14,16 @@ /* Sections ========================================================================== */ - /** - * Remove the margin in all browsers (opinionated). + * 移除所有浏览器中的 body 边距（这是作者的意见）。 */ - body { margin: 0; } /** - * Add the correct display in IE 9-. + * 在 IE 9- 中正确显示这些 HTML5 元素。 */ - article, aside, footer, @@ -40,10 +34,8 @@ section { } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. + * 在 Chrome, Firefox, 和 Safari 中修正 `h1` 元素在 `section` 和 `article` 上下文中字体大小和边距的问题。 */ - h1 { font-size: 2em; margin: 0.67em 0; @@ -51,12 +43,9 @@ h1 { /* Grouping content ========================================================================== */ - /** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. + * 1. 在 IE 9- 中正确显示这些元素。 */ - figcaption, figure, main { /* 1 */ @@ -64,18 +53,16 @@ main { /* 1 */ } /** - * Add the correct margin in IE 8. + * 在 IE 8 中正确设置 figure 的边距。 */ - figure { margin: 1em 40px; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * 1. 在 Firefox 中正确设置 hr 的盒模型。 + * 2. 在 Edge 和 IE 中显示溢出内容。 */ - hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ @@ -83,10 +70,9 @@ hr { } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. + * 1. 在所有浏览器中正确继承和缩放字体大小。 + * 2. 修正所有浏览器中奇怪的 `em` 字体大小。 */ - pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ @@ -94,22 +80,19 @@ pre { /* Text-level semantics ========================================================================== */ - /** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + * 1. 移除 IE 10 中活动链接上的灰色背景。 + * 2. 移除 iOS 8+ 和 Safari 8+ 中链接下划线之间的空隙。 */ - a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** - * 1. Remove the bottom border in Chrome 57- and Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + * 1. 移除 Chrome 57- 和 Firefox 39- 中 h1 下方的边框。 + * 2. 在 Chrome, Edge, IE, Opera, 和 Safari 中添加正确的文本装饰。 */ - abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ @@ -117,28 +100,25 @@ abbr[title] { } /** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + * 防止 Safari 6 中 `bolder` 样式的重复应用。 */ - b, strong { font-weight: inherit; } /** - * Add the correct font weight in Chrome, Edge, and Safari. + * 在 Chrome, Edge, 和 Safari 中添加正确的字体粗细。 */ - b, strong { font-weight: bolder; } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. + * 1. 在所有浏览器中正确继承和缩放字体大小。 + * 2. 修正所有浏览器中奇怪的 `em` 字体大小。 */ - code, kbd, samp { @@ -147,35 +127,30 @@ samp { } /** - * Add the correct font style in Android 4.3-. + * 在 Android 4.3- 中添加正确的字体风格。 */ - dfn { font-style: italic; } /** - * Add the correct background and color in IE 9-. + * 在 IE 9- 中添加正确的背景色和颜色。 */ - mark { background-color: #ff0; color: #000; } /** - * Add the correct font size in all browsers. + * 在所有浏览器中添加正确的字体大小。 */ - small { font-size: 80%; } /** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. + * 防止 `sub` 和 `sup` 元素影响所有浏览器中的行高。 */ - sub, sup { font-size: 75%; @@ -194,49 +169,42 @@ sup { /* Embedded content ========================================================================== */ - /** - * Add the correct display in IE 9-. + * 在 IE 9- 中正确显示音频和视频元素。 */ - audio, video { display: inline-block; } /** - * Add the correct display in iOS 4-7. + * 在 iOS 4-7 中正确显示没有控制栏的音频元素。 */ - audio:not([controls]) { display: none; height: 0; } /** - * Remove the border on images inside links in IE 10-. + * 移除 IE 10- 中图片链接内的边框。 */ - img { border-style: none; } /** - * Hide the overflow in IE. + * 在 IE 中隐藏 SVG 溢出部分。 */ - svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ - /** - * 1. Change the font styles in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. + * 1. 更改所有浏览器中的表单元素字体样式（意见性）。 + * 2. 移除 Firefox 和 Safari 中的边距。 */ - button, input, optgroup, @@ -249,31 +217,27 @@ textarea { } /** - * Show the overflow in IE. - * 1. Show the overflow in Edge. + * 1. 在 IE 中显示溢出。 + * 2. 在 Edge 中显示溢出。 */ - button, input { /* 1 */ overflow: visible; } /** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. + * 移除 Edge, Firefox, 和 IE 中的文本转换继承。 + * 1. 移除 Firefox 中的文本转换继承。 */ - button, select { /* 1 */ text-transform: none; } /** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. + * 1. 防止 WebKit 中的一个 bug，在 Android 4 中破坏本地 `audio` 和 `video` 控件。 + * 2. 修正 iOS 和 Safari 中无法自定义可点击类型的样式。 */ - button, html [type="button"], /* 1 */ [type="reset"], @@ -282,9 +246,8 @@ html [type="button"], /* 1 */ } /** - * Remove the inner border and padding in Firefox. + * 移除 Firefox 中按钮和输入框聚焦时的内边距和边框。 */ - button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, @@ -294,9 +257,8 @@ button::-moz-focus-inner, } /** - * Restore the focus styles unset by the previous rule. + * 恢复 Firefox 中移除的按钮和输入框的焦点样式。 */ - button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, @@ -305,20 +267,17 @@ button:-moz-focusring, } /** - * Correct the padding in Firefox. + * 在 Firefox 中修正 fieldset 的内边距。 */ - fieldset { padding: 0.35em 0.75em 0.625em; } /** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. + * 1. 在 Edge 和 IE 中修正文本换行。 + * 2. 在 IE 中修正从 fieldset 继承的颜色。 + * 3. 移除内边距，以防开发人员在所有浏览器中将 fieldset 的内边距设置为零时出现问题。 */ - legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ @@ -329,28 +288,25 @@ legend { } /** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + * 1. 在 IE 9- 中正确显示进度条。 + * 2. 在 Chrome, Firefox, 和 Opera 中正确设置垂直对齐方式。 */ - progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** - * Remove the default vertical scrollbar in IE. + * 移除 IE 中 textarea 的默认垂直滚动条。 */ - textarea { overflow: auto; } /** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. + * 1. 在 IE 10- 中正确设置 checkbox 和 radio 的盒模型。 + * 2. 移除 IE 10- 中 checkbox 和 radio 的内边距。 */ - [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ @@ -358,38 +314,34 @@ textarea { } /** - * Correct the cursor style of increment and decrement buttons in Chrome. + * 在 Chrome 中修正数字输入框上下箭头的高度。 */ - [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. + * 1. 修正 Chrome 和 Safari 中搜索框的奇怪外观。 + * 2. 修正 Safari 中搜索框的轮廓样式。 */ - [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + * 移除 macOS 上 Chrome 和 Safari 中搜索框取消按钮和装饰的内边距。 */ - [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. + * 1. 修正 iOS 和 Safari 中无法自定义可点击类型的样式。 + * 2. 在 Safari 中更改字体属性以继承。 */ - ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ @@ -397,51 +349,43 @@ textarea { /* Interactive ========================================================================== */ - -/* - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. +/** + * 1. 在 IE 9- 中正确显示 details 元素。 + * 2. 在 Edge, IE, 和 Firefox 中正确显示 menu 元素。 */ - details, /* 1 */ menu { display: block; } -/* - * Add the correct display in all browsers. +/** + * 在所有浏览器中正确显示 summary 元素。 */ - summary { display: list-item; } /* Scripting ========================================================================== */ - /** - * Add the correct display in IE 9-. + * 在 IE 9- 中正确显示 canvas 元素。 */ - canvas { display: inline-block; } /** - * Add the correct display in IE. + * 在 IE 中正确显示 template 元素。 */ - template { display: none; } /* Hidden ========================================================================== */ - /** - * Add the correct display in IE 10-. + * 在 IE 10- 中正确显示带有 hidden 属性的元素。 */ - [hidden] { display: none; -} \ No newline at end of file +} diff --git a/front-end/mall4v/src/assets/scss/_variables.scss b/front-end/mall4v/src/assets/scss/_variables.scss index b081e04..1041e18 100644 --- a/front-end/mall4v/src/assets/scss/_variables.scss +++ b/front-end/mall4v/src/assets/scss/_variables.scss @@ -1,13 +1,13 @@ // 站点主色 -// tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-[#17B3A3]/index.css']当前主题色一致 -$--color-primary: #02A1E9; +// tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-#17B3A3/index.css']当前主题色一致 +$--color-primary: #02A1E9; // 定义站点的主要颜色，这是一个蓝色色调（#02A1E9）。这个颜色将用于整个网站的一致性配色方案，包括链接、按钮、强调文字等元素。为了保证一致性，需要确保此颜色与Element UI框架中的主题色相匹配。 -// Navbar -$navbar--background-color: $--color-primary; +// Navbar (导航栏) +$navbar--background-color: $--color-primary; // 使用站点主色作为导航栏的背景颜色。这使得导航栏与站点的整体设计保持一致，并且在视觉上提供了一种连贯的品牌形象。 -// Sidebar -$sidebar--background-color-dark: #263238; -$sidebar--color-text-dark: #8a979e; +// Sidebar (侧边栏) +$sidebar--background-color-dark: #263238; // 设置侧边栏的深色背景颜色（#263238），这是一种深灰色调。这种颜色通常用于创建对比度，使得侧边栏中的内容更加突出。 +$sidebar--color-text-dark: #8a979e; // 设置侧边栏中文本的颜色（#8a979e），这是一种浅灰色调。选择这种颜色是为了确保文本具有良好的可读性，同时与深色背景形成适当的对比。 -// Content -$content--background-color: #f1f4f5; +// Content (内容区) +$content--background-color: #f1f4f5; // 定义内容区的背景颜色（#f1f4f5），这是一种非常浅的灰蓝色。这种颜色可以为主要内容提供一个干净、明亮的背景，同时也不会分散用户的注意力。 diff --git a/front-end/mall4v/src/assets/scss/index.scss b/front-end/mall4v/src/assets/scss/index.scss index c17d72c..8b4c002 100644 --- a/front-end/mall4v/src/assets/scss/index.scss +++ b/front-end/mall4v/src/assets/scss/index.scss @@ -1,3 +1,9 @@ -@import "normalize"; // api: https://github.com/necolas/normalize.css/ -@import "variables"; // 站点变量 -@import "base"; +// 导入 Normalize.css 重置样式 +// api: https://github.com/necolas/normalize.css/ +@import "normalize"; // Normalize.css 是一个CSS库，旨在使浏览器的默认样式更加一致，并修复一些常见的跨浏览器问题。通过导入此文件，可以确保在不同浏览器中呈现的内容具有一致的基础样式。Normalize.css 不会移除所有默认样式，而是保留有用的默认值并进行微调，以提高兼容性和可读性。 + +// 导入站点变量 +@import "variables"; // 这里导入的是包含整个站点所使用的所有Sass变量的文件。这些变量定义了诸如颜色、字体大小、间距等全局样式属性。通过将这些变量集中在一个文件中，可以在整个项目中方便地管理和统一修改样式。例如，如果需要更改站点的主要颜色，只需在一个地方更新变量值即可。 + +// 导入基础样式 +@import "base"; // 此处导入的是包含了项目中所有基本样式的文件，它可能包括但不限于：排版规则、链接样式、按钮样式等。这些基础样式是构建其他更具体组件的基础，确保了一致的外观和感觉。此外，这里还可以设置全局的选择器、清除浮动的实用工具类以及其他任何对整个项目至关重要的样式规则。 diff --git a/front-end/mall4v/src/components/mul-pic-upload/index.vue b/front-end/mall4v/src/components/mul-pic-upload/index.vue index 9b934a4..1fd1788 100644 --- a/front-end/mall4v/src/components/mul-pic-upload/index.vue +++ b/front-end/mall4v/src/components/mul-pic-upload/index.vue @@ -1,60 +1,75 @@ diff --git a/front-end/mall4v/src/components/pic-upload/index.vue b/front-end/mall4v/src/components/pic-upload/index.vue index ed275c1..44ecd17 100644 --- a/front-end/mall4v/src/components/pic-upload/index.vue +++ b/front-end/mall4v/src/components/pic-upload/index.vue @@ -1,96 +1,109 @@ diff --git a/front-end/mall4v/src/components/prods-select/index.vue b/front-end/mall4v/src/components/prods-select/index.vue index c50bad4..8e50f25 100644 --- a/front-end/mall4v/src/components/prods-select/index.vue +++ b/front-end/mall4v/src/components/prods-select/index.vue @@ -1,205 +1,229 @@ diff --git a/front-end/mall4v/src/components/tiny-mce/dynamicLoadScript.js b/front-end/mall4v/src/components/tiny-mce/dynamicLoadScript.js index 9b28e5a..3c1a8fd 100644 --- a/front-end/mall4v/src/components/tiny-mce/dynamicLoadScript.js +++ b/front-end/mall4v/src/components/tiny-mce/dynamicLoadScript.js @@ -1,58 +1,85 @@ +// 定义一个数组来存储所有的回调函数，以便在脚本加载完成后依次调用它们。 let callbacks = [] -function loadedTinymce () { - // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144 - // check is successfully downloaded script - return window.tinymce +/** + * 检查是否已成功加载TinyMCE编辑器。 + * + * @returns {boolean} 如果window对象存在tinymce属性，则返回true，表示TinyMCE已加载；否则返回false。 + */ +function loadedTinymce() { + // 解决 https://github.com/PanJiaChen/vue-element-admin/issues/2144 的问题 + // 检查是否成功下载了脚本 + return window.tinymce !== undefined } +/** + * 动态加载指定URL的脚本文件，并在加载完成或发生错误时调用提供的回调函数。 + * + * @param {string} src - 脚本文件的URL。 + * @param {Function} [callback] - 可选参数，当脚本加载完成或出错时将被调用的回调函数。 + */ const dynamicLoadScript = (src, callback) => { const existingScript = document.getElementById(src) - const cb = callback || function () {} + const cb = callback || function () {} // 如果没有提供回调，则创建一个空函数作为默认值 if (!existingScript) { + // 创建新的 - + diff --git a/front-end/mall4v/src/components/verifition/Verify/VerifyPoints.vue b/front-end/mall4v/src/components/verifition/Verify/VerifyPoints.vue index 1a38f61..d46beec 100644 --- a/front-end/mall4v/src/components/verifition/Verify/VerifyPoints.vue +++ b/front-end/mall4v/src/components/verifition/Verify/VerifyPoints.vue @@ -1,61 +1,63 @@ + diff --git a/front-end/mall4v/src/components/verifition/Verify/VerifySlide.vue b/front-end/mall4v/src/components/verifition/Verify/VerifySlide.vue index 6a3f144..ef68b5e 100644 --- a/front-end/mall4v/src/components/verifition/Verify/VerifySlide.vue +++ b/front-end/mall4v/src/components/verifition/Verify/VerifySlide.vue @@ -1,86 +1,126 @@ diff --git a/front-end/mall4v/src/layout/main-navbar-update-password.vue b/front-end/mall4v/src/layout/main-navbar-update-password.vue index e981fd9..195b955 100644 --- a/front-end/mall4v/src/layout/main-navbar-update-password.vue +++ b/front-end/mall4v/src/layout/main-navbar-update-password.vue @@ -1,121 +1,157 @@ diff --git a/front-end/mall4v/src/layout/main-navbar.vue b/front-end/mall4v/src/layout/main-navbar.vue index e5cd724..627e51b 100644 --- a/front-end/mall4v/src/layout/main-navbar.vue +++ b/front-end/mall4v/src/layout/main-navbar.vue @@ -1,172 +1,219 @@ diff --git a/front-end/mall4v/src/layout/main-sidebar-sub-menu-item.vue b/front-end/mall4v/src/layout/main-sidebar-sub-menu-item.vue index 867e1af..7c461e8 100644 --- a/front-end/mall4v/src/layout/main-sidebar-sub-menu-item.vue +++ b/front-end/mall4v/src/layout/main-sidebar-sub-menu-item.vue @@ -1,125 +1,154 @@