基本完成描述列表组件；

app/command/ScanDemo.php

@@ -0,0 +1,58 @@
+<?php
+
+declare(strict_types=1);
+
+namespace app\command;
+
+use app\model\Category;
+use app\model\Post;
+use think\console\Command;
+use think\console\Input;
+use think\console\input\Argument;
+use think\console\input\Option;
+use think\console\Output;
+use think\facade\App;
+use think\facade\Config;
+
+class ScanDemo extends Command
+{
+    protected function configure()
+    {
+        // 指令配置
+        $this->setName('scan:demo')
+            ->setDescription('the scan:demo command');
+    }
+
+    protected function execute(Input $input, Output $output)
+    {
+        // 指令输出
+        $output->writeln('scan:demo');
+
+
+        $model_category = Category::where('title', '组件')->find();
+
+        $demo_pc_dir = App::getRootPath() . '/demo/pc';
+        
+        $list_demo_file = scandir($demo_pc_dir);
+
+        foreach ($list_demo_file as  $file_name) {
+            $file_name = str_replace(['.html', '.', '..',], '', $file_name);
+
+            if (empty($file_name)) {
+                continue;
+            }
+
+            $model_post = Post::where('tpl_name', $file_name)->find();
+            if (empty($model_post)) {
+                $output->writeln('新组件：' . $file_name);
+                $model_post = new Post();
+                $model_post->type = 'default';
+                $model_post->tpl_name = $file_name;
+                $model_post->title = Config::get("demo.{$file_name}.title", $file_name);
+                $model_post->desc = Config::get("demo.{$file_name}.desc", $file_name);
+                $model_post->category_id = $model_category['id'];
+                $model_post->save();
+            }
+        }
+    }
+}

config/console.php

@@ -4,11 +4,13 @@
 // +----------------------------------------------------------------------
 
 use app\command\make\View;
+use app\command\ScanDemo;
 
 return [
     // 指令定义
     'commands' => [
         'app\command\ResetPassword',
-        View::class
+        View::class,
+        ScanDemo::class
     ],
 ];

database/seeds/InitPost.php

@@ -38,8 +38,6 @@ class InitPost extends Seeder
 
         $list_demo_file = scandir($demo_pc_dir);
 
-
-
         foreach ($list_demo_file as  $file_name) {
             $file_name = str_replace(['.html', '.', '..',], '', $file_name);
 
@@ -50,6 +48,7 @@ class InitPost extends Seeder
             $model_post = Post::where('tpl_name', $file_name)->find();
             if (empty($model_post)) {
                 $model_post = new Post();
+                $model_post->type = 'default';
                 $model_post->tpl_name = $file_name;
                 $model_post->title = Config::get("demo.{$file_name}.title", $file_name);
                 $model_post->desc = Config::get("demo.{$file_name}.desc", $file_name);

demo/pc/descriptions.html

@@ -1,4 +1,4 @@
-{volist name="[''=>'基本','table'=>'表格']" id='vo'}
+{volist name="[''=>'基本','table'=>'表格','border'=>'边框']" id='vo'}
 
 <fieldset class="layui-elem-field layui-field-title">
     <legend>描述列表-{$vo}</legend>
@@ -6,52 +6,105 @@
         <div class="ul-descriptions {$key}">
             <div class="item">
                 <div class="label">
-                    昵称
+                    商品分类
                 </div>
                 <div class="value">
-                    奥古斯宏
+                    图书
+                </div>
+            </div>
+            <div class="item short-line">
+                <div class="label">
+                    商品标题
+                </div>
+                <div class="value">
+                    中国科幻基石丛书：三体全集（套装1-3册）
+                </div>
+            </div>
+            <div class="item poster">
+                <div class="label">
+                    封面
+                </div>
+                <div class="value">
+                    <img class="poster-item" src="http://cdn.bookcase.ulthon.com/upload/book/619142b09b36c.jpe" alt="">
                 </div>
             </div>
             <div class="item">
                 <div class="label">
-                    手机号
+                    作者
                 </div>
                 <div class="value">
-                    13000000001
+                    刘慈欣
+                </div>
+            </div>
+
+            <div class="item price">
+                <div class="label">
+                    价格
+                </div>
+                <div class="value">
+                    <span class="price-item">50.30</span>
                 </div>
             </div>
             <div class="item">
                 <div class="label">
-                    地址
+                    销量
                 </div>
                 <div class="value">
-                    山东省临沂市兰山区
+                    300000
                 </div>
             </div>
             <div class="item">
                 <div class="label">
-                    身份证号
+                    出版社
                 </div>
                 <div class="value">
-                    371302199700000000
+                    清华大学出版社
                 </div>
             </div>
+
             <div class="item">
                 <div class="label">
-                    核酸状态
+                    装帧
                 </div>
                 <div class="value">
-                    阴性
+                    平装-胶订
                 </div>
             </div>
-            <div class="item">
+            <div class="item tag short-line">
                 <div class="label">
-                    民族
+                    标签
                 </div>
                 <div class="value">
-                    汉
+                    <div class="tag-item">科幻</div>
+                    <div class="tag-item">畅销</div>
                 </div>
             </div>
+            <div class="item article">
+                <div class="label">
+                    商品详情
+                </div>
+                <div class="value">
+                    <div class="article-item">
+                        第一部
+                        《三体》
+                        文化大革命如火如荼地进行，天文学家叶文洁在其间历经劫难，被带到军方绝秘计划“红岸工程”。叶文洁以太阳为天线，向宇宙发出地球文明的第一声啼鸣，取得了探寻外星文明的突破性进展。三颗无规则运行的太阳主导下，四光年外的“三体文明”百余次毁灭与重生，正被逼迫不得不逃离母星，而恰在此时，他们接收到了地球发来的信息。对人性绝望的叶文洁向三体人暴露了地球的坐标，彻底改变了人类的命运。
+                        地球的基础科学出现了异常的扰动，纳米科学家汪淼进入神秘的网络游戏《三体》，开始逐步逼近这个世界的真相。汪淼参加一次玩家聚会时，接触到了地球上应对三体人到来而形成的一个秘密组织（ETO）。地球防卫组织中国区作战中心通过“古筝计划”，一定程度上挫败了拯救派和降临派扰乱人类科学界和其他领域思想的图谋，获悉处于困境之中的三体人为了得到一个能够稳定生存的世界决定入侵地球。
+                        在运用超技术锁死地球人的基础科学之后，庞大的三体舰队开始向地球进发，人类的末日悄然来临 [3-6] 。
+                        第二部
+                        《三体2：黑暗森林》
+                        三体人在利用科技锁死了地球人的科学之后，出动庞大的宇宙舰队直扑太阳系，面对地球文明前所未有的危局，人类组建起同样庞大的太空舰队，同时（PDC）利用三体人思维透明的致命缺陷，制订了“面壁计划”。出乎意料地，社会学教授罗辑被选出作为四位“面壁者”之一，展开对三体人的秘密反击。虽然三体人自身无法识破人类的计谋，却依靠由地球人中的背叛者挑选出的“破壁人”与“面壁者”进行智慧博弈。
+                        在这场你死我活的文明生存竞争中，罗辑由一开始的逃避和享乐主义逐渐意识到自己的责任，想到了一个对抗三体文明入侵的办法。科研军官章北海试图借一场陨石雨干涉飞船推进形式的研究方向。近二百年后，获选增援未来的他在人类舰队被“水滴”清除殆尽前，成功抢夺战舰逃离。此时罗辑证实了宇宙文明间的黑暗森林法则，任何暴露自己位置的文明都将很快被消灭。
+                        借助于这一发现，他以向全宇宙公布三体世界的位置坐标相威胁，暂时制止了三体对太阳系的入侵，使地球与三体建立起脆弱的战略平衡。 [5-7]
+                        第三部
+                        《三体3：死神永生》
+                        身患绝症的云天明买下一颗星星送给暗恋着的大学同学程心，而程心因参与（PIA）向三体舰队发射探测器的工作，却想让航天专业背景的他放弃安乐死，作为被执行人将大脑捐献给阶梯计划。与三体文明的战争使人类首次看到了宇宙黑暗的真相，地球文明因为黑暗森林打击的存在如临大敌，不敢在太空中暴露自己。在零道德的宇宙中发起黑暗战役的战舰被诱导返航，却受到有道德的地球文明审判。
+                        不称职的懦弱少女程心被选来充当掌握地球命运的执剑人，她因为罗辑的成功将这看作一项只需花费时间的任务，刚刚任职水滴就向地球发动攻击，程心为了忠于人性做出了错误的决定。在警示下继续逃离的“蓝色空间”号，受到具有发射引力波能力的“万有引力”号与两个同行的“水滴”追击，其上的人员进入四维空间摧毁水滴并占领了“万有引力”号，启动引力波广播向宇宙公布了三体星系的坐标。
+                        云天明与地球取得联系，通过讲述三个自己编创的童话故事，向程心透露大量情报；人类自以为悟出了生存竞争的秘密，开始进行掩体计划，维德领导的空间曲率驱动研究因为程心的错误判断被终止，使得人类最终没有能够逃脱被高级文明毁灭的命运。因为宇宙中还存在更强大的文明，战争的方式和武器已经远超出人类的想象，极高文明发出了一张卡片大小的“二向箔”，使整个太阳系压缩为二维平面而毁灭。
+                        在地球人类接近灭亡之际，只有程心和艾AA两个幸存者乘坐光速飞船离开。罗辑成为设置于冥王星的地球文明博物馆的“守墓人”，她们在冥王星带走人类文明的精华。在云天明送的恒星的一颗行星上，程心遇到关一帆且探讨了宇宙降维的真相，然而超乎一切之上的力量要求宇宙归零重生，在黑域中穿越长达1800万年的时空……程心没有等到云天明到来，和关一帆在小宇宙中短暂居住后重新进入大宇宙生活 [5] [8] 。
+                    </div>
+                </div>
+            </div>
+
         </div>
     </div>
 </fieldset>

source/scss/desciptions/_desciptions.scss

@@ -1,20 +1,18 @@
 .ul-descriptions {
 
     // TODO:使用grid实现布局
+    display              : grid;
+    grid-template-columns: calc(1 / 3 * 100%) calc(1 / 3 * 100%) calc(1 / 3 * 100%);
 
-    display  : flex;
+    $labelWidth: 90px;
-    flex-wrap: wrap;
-
 
     .item {
-        display : inline-flex;
+        display   : inline-flex;
-        width   : 30%;
+        position  : relative;
-        position: relative;
+        min-height: 40px;
-        height  : 40px;
-
 
         .label {
-            width          : calc(40% - 12px);
+            width          : calc($labelWidth - 12px);
             padding-right  : 12px;
             position       : absolute;
             height         : 100%;
@@ -22,50 +20,146 @@
             align-items    : center;
             justify-content: flex-end;
             color          : #333;
+            min-width      : calc($labelWidth - 12px);
+            font-weight    : 400;
         }
 
         .value {
-            position       : absolute;
+            width          : calc(100% - $labelWidth - 12px);
-            width          : calc(60% - 0px);
+            margin-left    : calc($labelWidth + 12px);
-            margin-left    : calc(40% + 0px);
             display        : flex;
             align-items    : center;
             justify-content: left;
-            height         : 100%;
+            height         : auto;
             white-space    : break-all;
             word-break     : break-all;
             color          : #666;
         }
+
+        &.article {
+            grid-column-start: 1;
+            grid-column-end  : 4;
+
+            .label {
+                align-items: flex-start;
+                padding-top: 10px;
+                height     : calc(100% - 10px)
+            }
+
+            .value {
+                .article-item {
+                    white-space: break-spaces;
+                    padding    : 5px;
+                }
+            }
+        }
+
+        &.tag {
+            .value {
+                .tag-item {
+                    padding         : 3px 6px;
+                    border-radius   : 3px;
+                    background-color: #6cf;
+                    color           : #fff;
+                    margin-right    : 5px;
+                    font-size       : 12px;
+                }
+            }
+        }
+
+        &.poster {
+            grid-row: span 2;
+
+            .value {
+                .poster-item {
+                    max-width : 100%;
+                    max-height: 80px;
+                    margin    : 5px;
+                }
+            }
+        }
+
+        &.line {
+            grid-column-start: 1;
+            grid-column-end  : 4;
+        }
+
+        &.lines {
+            grid-column-start: 1;
+            grid-column-end  : 4;
+
+            .label {
+                align-items: flex-start;
+                padding-top: 10px;
+                height     : calc(100% - 10px)
+            }
+        }
+
+        &.short-line {
+            grid-column: span 2;
+        }
+
+        &.box {
+            grid-row: span 2;
+        }
     }
 
     &.table {
-        margin-left: 1px;
+        $borderColor : #000;
-        margin-top : 1px;
+        border-style : solid;
+        border-color : $borderColor;
+        border-width : 1px;
+        margin-right : 1px;
+        margin-bottom: 1px;
 
         .item {
-            border     : 1px solid #000;
+
-            margin-left: -1px;
+            border-style : solid;
-            margin-top : -1px;
+            border-color : $borderColor;
+            border-width : 0px 1px 1px 0;
+            margin-bottom: -1px;
+            margin-right : -1px;
 
             .label {
-                position: relative;
+                position    : absolute;
-
+                border-right: 1px solid $borderColor;
-                &::after {
-                    content         : '';
-                    position        : absolute;
-                    right           : 0;
-                    top             : 0;
-                    height          : 100%;
-                    width           : 1px;
-                    background-color: #000;
-                }
             }
 
+            &.line {
+                border-right: 0;
 
-            .value {
-                width      : calc(60% - 10px);
-                margin-left: calc(40% + 10px);
             }
+
         }
     }
+
+    &.border {
+        $borderColor : rgb(235, 238, 245);
+        border-style : solid;
+        border-color : $borderColor;
+        border-width : 1px;
+        margin-right : 1px;
+        margin-bottom: 0px;
+
+        .item {
+            border-style : solid;
+            border-color : $borderColor;
+            border-width : 0px 1px 1px 0;
+            margin-bottom: 0px;
+            margin-right : -1px;
+
+            .label {
+                position        : absolute;
+                border-right    : 1px solid $borderColor;
+                background-color: rgb(245, 247, 250);
+            }
+
+            &.line {
+                border-right: 0;
+
+            }
+
+        }
+    }
+
 }