正文 

当前位置： 首页 > 技术 > java教程

硅谷外卖前端部分-shoplist组件(静态)(代码片段)

mxsf mxsf     2022-12-17     688

关键词：

一、图片资源

技术图片

二、components/ShopList/ShopList.vue

<template>
  <div class="shop_container">
    <ul class="shop_list">
      <li class="shop_li border-1px">
        <a>
          <div class="shop_left">
            <img class="shop_img" src="./images/shop/1.jpg">
          </div>
          <div class="shop_right">
            <section class="shop_detail_header">
              <h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
              <ul class="shop_detail_ul">
                <li class="supports">保</li>
                <li class="supports">准</li>
                <li class="supports">票</li>
              </ul>
            </section>
            <section class="shop_rating_order">
              <section class="shop_rating_order_left">
                <div class="star star-24">
                  <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item half"></span>
                  <span class="star-item off"></span>
                </div>
                <div class="rating_section">
                  3.6
                </div>
                <div class="order_section">
                  月售106单
                </div>
              </section>
              <section class="shop_rating_order_right">
                <span class="delivery_style delivery_right">硅谷专送</span>
              </section>
            </section>
            <section class="shop_distance">
              <p class="shop_delivery_msg">
                <span>¥20起送</span>
                <span class="segmentation">/</span>
                <span>配送费约¥5</span>
              </p>
            </section>
          </div>
        </a>
      </li>
      <li class="shop_li border-1px">
        <a>
          <div class="shop_left">
            <img class="shop_img" src="./images/shop/2.jpg">
          </div>
          <div class="shop_right">
            <section class="shop_detail_header">
              <h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
              <ul class="shop_detail_ul">
                <li class="supports">保</li>
                <li class="supports">准</li>
                <li class="supports">票</li>
              </ul>
            </section>
            <section class="shop_rating_order">
              <section class="shop_rating_order_left">
                <div class="star star-24">
                  <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item off"></span>
                </div>
                <div class="rating_section">
                  4.1
                </div>
                <div class="order_section">
                  月售106单
                </div>
              </section>
              <section class="shop_rating_order_right">
                <span class="delivery_style delivery_right">硅谷专送</span>
              </section>
            </section>
            <section class="shop_distance">
              <p class="shop_delivery_msg">
                <span>¥20起送</span>
                <span class="segmentation">/</span>
                <span>配送费约¥5</span>
              </p>
            </section>
          </div>
        </a>
      </li>
      <li class="shop_li border-1px">
        <a>
          <div class="shop_left">
            <img class="shop_img" src="./images/shop/3.jpg">
          </div>
          <div class="shop_right">
            <section class="shop_detail_header">
              <h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
              <ul class="shop_detail_ul">
                <li class="supports">保</li>
                <li class="supports">准</li>
                <li class="supports">票</li>
              </ul>
            </section>
            <section class="shop_rating_order">
              <section class="shop_rating_order_left">
                <div class="star star-24">
                  <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item off"></span>
                  <span class="star-item off"></span>
                </div>
                <div class="rating_section">
                  3.2
                </div>
                <div class="order_section">
                  月售106单
                </div>
              </section>
              <section class="shop_rating_order_right">
                <span class="delivery_style delivery_right">硅谷专送</span>
              </section>
            </section>
            <section class="shop_distance">
              <p class="shop_delivery_msg">
                <span>¥20起送</span>
                <span class="segmentation">/</span>
                <span>配送费约¥5</span>
              </p>
            </section>
          </div>
        </a>
      </li>
      <li class="shop_li border-1px">
        <a>
          <div class="shop_left">
            <img class="shop_img" src="./images/shop/4.jpg">
          </div>
          <div class="shop_right">
            <section class="shop_detail_header">
              <h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
              <ul class="shop_detail_ul">
                <li class="supports">保</li>
                <li class="supports">准</li>
                <li class="supports">票</li>
              </ul>
            </section>
            <section class="shop_rating_order">
              <section class="shop_rating_order_left">
                <div class="star star-24">
                  <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item half"></span>
                  <span class="star-item off"></span>
                </div>
                <div class="rating_section">
                  3.6
                </div>
                <div class="order_section">
                  月售106单
                </div>
              </section>
              <section class="shop_rating_order_right">
                <span class="delivery_style delivery_right">硅谷专送</span>
              </section>
            </section>
            <section class="shop_distance">
              <p class="shop_delivery_msg">
                <span>¥20起送</span>
                <span class="segmentation">/</span>
                <span>配送费约¥5</span>
              </p>
            </section>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default 
    name: ‘ShopList‘,
  
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .shop_container
    margin-bottom 50px
    .shop_list
      .shop_li
        bottom-border-1px(#f1f1f1)
        width 100%
        >a
          clearFix()
          display block
          box-sizing border-box
          padding 15px 8px
          width 100%
          .shop_left
            float left
            box-sizing border-box
            width 23%
            height 75px
            padding-right 10px
            .shop_img
              display block
              width 100%
              height 100%
          .shop_right
            float right
            width 77%
            .shop_detail_header
              clearFix()
              width 100%
              .shop_title
                float left
                width 200px
                color #333
                font-size 16px
                line-height 16px
                font-weight 700
                &::before
                  content ‘品牌‘
                  display inline-block
                  font-size 11px
                  line-height 11px
                  color #333
                  background-color #ffd930
                  padding 2px 2px
                  border-radius 2px
                  margin-right 5px
              .shop_detail_ul
                float right
                margin-top 3px
                .supports
                  float left
                  font-size 10px
                  color #999
                  border 1px solid #f1f1f1
                  padding 0 2px
                  border-radius 2px
            .shop_rating_order
              clearFix()
              width 100%
              margin-top 18px
              margin-bottom 8px
              .shop_rating_order_left
                float left
                color #ff9a0d
                .star //2x图 3x图
                  float left
                  font-size 0
                  .star-item
                    display inline-block
                    background-repeat no-repeat
                  &.star-48
                    .star-item
                      width 20px
                      height 20px
                      margin-right 22px
                      background-size 20px 20px
                      &:last-child
                        margin-right: 0
                      &.on
                        bg-image(‘./images/stars/star48_on‘)
                      &.half
                        bg-image(‘./images/stars/star48_half‘)
                      &.off
                        bg-image(‘./images/stars/star48_off‘)
                  &.star-36
                    .star-item
                      width 15px
                      height 15px
                      margin-right 6px
                      background-size 15px 15px
                      &:last-child
                        margin-right 0
                      &.on
                        bg-image(‘./images/stars/star36_on‘)
                      &.half
                        bg-image(‘./images/stars/star36_half‘)
                      &.off
                        bg-image(‘./images/stars/star36_off‘)
                  &.star-24
                    .star-item
                      width 10px
                      height 10px
                      margin-right 3px
                      background-size 10px 10px
                      &:last-child
                        margin-right 0
                      &.on
                        bg-image(‘./images/stars/star24_on‘)
                      &.half
                        bg-image(‘./images/stars/star24_half‘)
                      &.off
                        bg-image(‘./images/stars/star24_off‘)
                .rating_section
                  float left
                  font-size 10px
                  color #ff6000
                  margin-left 4px
                .order_section
                  float left
                  font-size 10px
                  color #666
                  transform scale(.8)
              .shop_rating_order_right
                float right
                font-size 0
                .delivery_style
                  transform-origin 35px 0
                  transform scale(.7)
                  display inline-block
                  font-size 12px
                  padding 1px
                  border-radius 2px
                .delivery_left
                  color #fff
                  margin-right -10px
                  background-color #02a774
                  border 1px solid #02a774
                .delivery_right
                  color #02a774
                  border 1px solid #02a774
            .shop_distance
              clearFix()
              width 100%
              font-size 12px
              .shop_delivery_msg
                float left
                transform-origin 0
                transform scale(.9)
                color #666
              .segmentation
                color #ccc
</style>

三、Msite.vue

<ShopList/>

<script>
  import ShopList from ‘../../components/ShopList/ShopList‘

  export default 
    name: ‘Msite‘,
    components: 
      ShopList
    
  
</script>

 

硅谷外卖前端部分-headertop组件(代码片段)

一、说明此组件会使用到slot进行组件间通信slot通信是标签,而不是单纯的数据二、components/HeaderTop/HeaderTop.vue<template><!--首页头部--><headerclass="header"><slotname="search"></slot><spanclass="header_tit 查看详情

（十四）硅谷外卖前端部分-前后台交互ajax(代码片段)

一、下载依赖包npminstall--saveaxios二、封装ajax请求模块2.1api/ajax.jsimportaxiosfrom‘axios‘exportdefaultfunctionajax(url=‘‘,data=,type=‘GET‘)returnnewPromise(function(resolve,reject)letpromiseif(type===‘GET‘)// 查看详情

（十六）硅谷外卖-使用vuex管理状态(代码片段)

一、下载vuexnpminstall--savevuex二、定义statestore/state.jsexportdefaultlatitude:40.10038,//纬度longitude:116.36867,//经度address:,//地址信息对象categorys:[],//分类数组shops:[],三、定义mutation-typesstore/mutation-types.js 查看详情

（十四）硅谷外卖-后台应用（上）

一、说明咱们的项目是一个前后台分离的项目:前台应用与后台应用后台应用负责处理前台应用提交的请求,并给前台应用返回json数前台应用负责展现数据,与用户交互,与后台应用交互二、运行后台应用确保启动mongodb服务启动服务... 查看详情

前端组件化基础知识(代码片段)

...xff0c;我是来自《技术银河》的三钻。这里我们一起来学习前端组件化的知识，而组件化在前端架构里面是最重要的一个部分。讲到前端架构，其实前端架构中最热门的就有两个话题，一个就是组件化，另一个就是... 查看详情

小区代送外卖和快递的微信小程序-专业定制开发

1.背景：现在很多外卖员在小区门口进不去，或者要在小区门口耽误不少时间，导致外卖员一天的送单量上不去，所以有必要开发一个小程序为外卖小哥服务，让他们在花点小钱在平台下单后，这边安排员... 查看详情

前端学习（3254）：react中todolist制作静态组件

        查看详情

前端练习小米商城主页（静态部分）

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情

非静态网站的组成部分和相关技能都有哪些

...、Python等），但缺乏网站的完整图片。我知道的组件是：前端：人们所看到的，（HTML、JS、CS 查看详情

前端请求的js，css只加载一部分就断开连接,静态文件加载不全

...的某一天，知道篇文章：今天遇到一个问题，使用vue写的前端页面请求js(vendor.xxx.js)，收到的响应状态为200，但只加载了一部分，导致vue运行不起来。服务端结构为nginx转发到springboot写的微服务，本地访问测试都没有问题，上线... 查看详情

尚硅谷设计模式学习(13)---[代理模式(proxy)---静态代理,动态代理,cglib代理](代码片段)

🚀🚀🚀尚硅谷传送门==>B站尚硅谷Java设计模式❤❤❤感谢尚硅谷❤❤❤🕐🕑🕒最近开始计划学习一下设计模式了,加油!!!目录📢代理模式🌈静态代理🌈动态代理🌈Cglib代理📢... 查看详情

jvm系统优化实践：分代模型

...是湘王，这是我的51CTO博客，欢迎您来，欢迎您再来～大部分在代码里创建的对象，存活周期都是极短的，只有少数对象是长期存活的，如静态类和静态变量。采用不同方式创建和使用对象，其生存周期也不同。因此，JVM将堆内... 查看详情

前端实战项目：vue.js实现外卖平台webapp,饿了么项目的翻版

参考技术A链接：https://github.com/ljianshu/mt-app适合没有经验的朋友。集点菜、用户评价和商家信息为一体的移动端点餐APP1.点餐页面点选商品后自动添加到购物车，并计算好总价，在商品列表、购物车列表和商品详情页都可以随意... 查看详情

模板继承组件自定义过滤器静态文件别名反向解析

...最常见的做法是使用模板。模板包含所需HTML页面的静态部分，以及一些特殊的模版语法，用于将动态内容插入静态部分。模板的设计实现了业务逻辑view与显示内容te 查看详情

黑马瑞吉外卖——

黑马瑞吉外卖项目部分知识总结，对项目中的难点、不熟悉内容、项目亮点以及bug进行记录与分享。以及项目中用到的设计思想进行总结黑马瑞吉外卖项目部分知识总结，对项目中的难点、不熟悉内容、项目亮点以及bug进行记录... 查看详情

配送路径规划基于matlab遗传算法求解静态外卖骑手路径规划问题含matlab源码2248期

⛄一、遗传算法求解静态外卖骑手路径规划问题1模型假设外卖配送的实际运行是一个复杂的过程,受诸多因素影响,为了建立调度模型,本文做如下假设。(1)外卖配送更多的是服务特殊群体,所以本文认为外卖配送是一种预约型配送,... 查看详情

基于antdesignpro开发管理系统的前端部分

一、概述AntDesignPro是一种由阿里蚂蚁团队开发的中台前端设计解决方案，很适合作为后台管理系统的前端框架。框架提供了齐全的路由菜单、布局、UI、组件等开发管理系统前端需要的功能。也支持开发自定义组件来满足一些个... 查看详情

前端整理——vue部分(代码片段)

（1）Vue的生命周期1）创建vue实例，初始化生命周期钩子函数2）数据检测及方法和计算属性代理。在数据检测和初始化数据之前调用beforeCreated()，这时还获取不到props或者data中的数据；数据、属性、方法初始化之后，调用created()... 查看详情