Tag:Design sketch

  • How to develop e-commerce system and what are the processes_ OctShop


    The development of e-commerce in China is advanced all over the world, and the development of e-commerce in China is obvious to all. Especially with the rapid development of mobile Internet, various e-commerce models emerge in endlessly. After transforming into e-commerce, many traditional enterprises have achieved unprecedented development and their sales performance has expanded rapidly. […]

  • Ztree — jQuery tree plug-in


    reference resourceshttp://www.treejs.cn <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Title</title> <!– Introduce css–> <link rel=”stylesheet” href=”bower_components/layer/skin/default/layer.css”> <link rel=”stylesheet” href=”bower_components/ztree/css/metroStyle/metroStyle.css”/> </head> <body> <div> <ul id=”treeDemo” class=”ztree”></ul> </div> <!– Introduce js–> <script src=”bower_components/jquery/dist/jquery.min.js”></script> <script type=”text/javascript” src=”bower_components/ztree/jquery.ztree.all.min.js”></script> <script type=”text/javascript” src=”bower_components/layer/layer.js”> </script> <script> //Simple ztree configuration var setting = { data: { simpleData: { enable: true, idKey: “id”, pIdKey: […]

  • [Vue component] timing progress bar


    Requirement Description: The operation progress bar is displayed. When the operation has not been completed for more than N seconds, manual cancellation is allowed. design sketch: realization: <time-progress :visible.sync=”progressVisible” :time=”10″ :percent=”progressPercent” :text.sync=”progressText” :finishedText.sync=”progressFinishedText” ></time-progress> <template> <el-dialog :visible.sync=”progressDialogVisible” width=”30%” class=”search-progress-dialog” :show-close=”ss <= 0″ :before-close=”handleCloseprogressDialog” :close-on-click-modal=”false” :close-on-press-escape=”false” > <p v-show=”progressPercent != 100″>{{ text }}</p> <p v-show=”progressPercent == […]

  • Electron + vue3 integration notes


    Integrated electron + Vue in the last few days(See here), the scaffold used is webpack, and the integrated Vue is 2 X old version. With the idea of keeping up with the times, today we will integrate the latest version of electron + Vue. Integrated rendering 1、 Preparation of development environment 1. Install node JS […]

  • Three ways of HTML floating


    1、 Several floating methods have been used recently. Here is a summary 1. concept of document flow and text flow: ①. Normal flow: in HTML pages, it is relative to the box model ②. Text flow: in HTML pages, it is relative to text 2. understanding of Floating: similar to the concept of layer in […]

  • CSS3 flex layout justify content: space between align the last line left


    Align the last row of flex layout to the left With the popularity of flex layout, we have to use flex layout in our work. When using flex layout, you should also encounter the problem of justify content: the last line of space between left alignment, as I did. Therefore, this article is specially organized […]

  • Uni app using Tencent maps (II)


    Uni app using Tencent maps (I) Locate nearby stores The code is as follows (example): //Distance between two points distance(la1, lo1, la2, lo2) { var La1 = (la1 * Math.PI) / 180.0 var La2 = (la2 * Math.PI) / 180.0 var La3 = La1 – La2 var Lb3 = (lo1 * Math.PI) / 180.0 – […]

  • Building the basic static page of Vue chat room


    design sketch HTML: <template>     <view>         <view>             <scroll-view scroll-y=”true”>                 <div> <!– Message notification — >                     <div>                         <div>2021-12-28 16:50:00</div> < div > XXX processed this work order < / div >                     </div> <!– Left — >                     <!– <div></div> –> <!– Right — >                     <!– <div></div> –>               </div>               <div>                 <div>                     <image src=”../../static/logo.png”>                     <div>                         <div>2021-12-28 16:50:00</div> < […]

  • CSS to achieve oblique stripe progress bar + gradient + animation


    Let’s start with a rendering: Animation gif To do the progress bar effect above, just look down! First, let’s analyze that the rendering consists of three parts: oblique stripe + gradient + animation Effect 1 — oblique stripesUse CSS3 to complete background: linear-gradient(-45deg, #0278ee 36%, #7db9e8 28%, #7db9e8 67%, #0278ee 25%); background-size: 24px 12px; Effect […]

  • Getting started with the shuttle AppBar


    Implementation effect diagram Main code class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: new Icon(Icons.arrow_back_ios), title: new Text(widget.title), backgroundColor: Colors.blue, centerTitle: true, actions: <Widget>[ //Non hidden menu new IconButton( icon: new Icon(Icons.add_alarm), tooltip: ‘Add Alarm’, onPressed: () {}, ), //Hide menu new PopupMenuButton<String>( itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[ […]

  • Bootstrap actual combat – waterfall flow layout


    There are a lot of tutorials on the basis of bootstrap on the Internet. In fact, the documents in bootstrap Chinese network (bootcss. Com) have been written in great detail, but there are few practical cases. Here we use some popular web page layout as the guide, and use the style in bootstrap to complete […]

  • Vue component communication – provide / inject


    Component communication is a very common operation in Vue development, and props is certainly the most commonly used component communication, but props is convenient for parent-child component communication, but when there are many component levels, props operation is very cumbersome and not easy to write;Note: for convenience, I put inject directly in the sub component […]