测试鸿蒙
2023-09-14 09:05:03 时间
<div class="container"> <div class="title"> <text class="name">Food</text> <text class="sub-titLe">Choose What You Like</text> </div> <div class="display-styLe"> <!-- 展示区--> <swiper id="swiperImage" class= "swiper-style"> <image src="{{$item}}" cLass="image-mode" focusable="true" for="{{imageList}}"></image> </swiper> <!--产品详情区--> <div class="container"> <div class="selection-bar-container"> <div class="selection-bar"> <image src=" {{$item}}" cLass="option-mode" οnfοcus="swipeToIndex({{$idx}})" οnclick="swipeToIndex ({{$idx}})" for="{{imageList}}"></image> </div> </div> <div class="description-first-paragraph"> <text class="description">{{descriptionFirstParagraph}}</text> </div> <div class="cart"> <text class="{{cartStyLe}}" οnclick="addCart" οnfοcus="getFocus" οnblur="lostFocus" focusable="true">{{cartText}}</text> </div> </div> </div> </div>
2
.container { flex-direction: column; justify-content: center; align-items: center; } .title { font-size: 100px; } /*phone*/ @media screen and (device-type: phone) { titLe { align-items: fLex-start; fLex-direction: coLumn; padding-Left: 60px; padding-right: 160px; padding-top: 20px; } name { font-size: 50px; coLor: #000000; } sub-title { font-size: 30px; coLor: #7a787d; margin-top: 10px; } dispLay-styLe { fLex-direction: coLumn; aLign-items: center; } }
3
export default { data: { title: "" }, onInit() { this.title = this.$t('strings.world'); }, swipeToIndex(index) { this.$element('swiperImage').swipeTo({index: index}); }, //加入购物车 addCart() { if (this.isCartEmpty) { this.cartText = 'Cart + 1' ; this.cartStyle ='add-cart-text'; this.isCartEmpty = false; } }, //获得焦点 getFocus() { if (this.isCartEmpty) { this.cartStyle = 'cart-text-focus'; } }, //失去焦点 lostFocus(){ if (this.isCartEmpty) { this.cartStyle = 'cart-text'; } }, }
相关文章
- mysql 获取分区的最大值_MySQL分区表测试「建议收藏」
- java怎么测试_java中如何使用Junit测试[通俗易懂]
- 测试技术提升分享_测试技术分享
- 海量订单系统微服务开发:订单接口管理后台微服务开发、集成测试
- Web自动化测试-Protractor基础(二)
- 移动端APP自动化测试框架-UiAutomator2基础
- 测试开发之前端系列!Vue 通信方式 slot (插槽)的分类
- 测试之路 pytest接口自动化框架-插件补充及pytest装饰器扩展
- Flask 框架:实现简单API测试接口
- 微服务间的测试策略
- 测试需求变更如何面对?
- 向微软宣战!谷歌类ChatGPT装进办公「全家桶」,升级版Big Bard加急测试
- 使用web页面实现oracle的安装和测试详解编程语言
- 利用 BATS 测试 Bash 脚本和库
- 探索MSSQL数据库的测试实践(测试mssql)
- 测试Linux HAL测试:一路提高,把握行业风云(linux hal)
- 测试Redis的会话保持能力(测试redis会话保持)
- JBuilder2005单元测试之创建测试固件
- 简单的ASP分页代码(测试正确)