4。1。3产品介绍论文网

（1）页面概述

向用户展示公司最新产品介绍，让用户能够通过产品的图片和文字描述更加了解产品的特点。一个公司对客户最大的价值自然是它的产品，优质的产品自然可以吸引到更多客户的注意，而这部分就是通过精美的图片和产品的特点描述吸引更多的客户关注。

（2）详细介绍

图 4。9 产品大类

图 4。10 产品详情

点击产品介绍的导航栏后页面跳转显示图 4。9的内容,用户可以点击对应图片跳至相应的详情页面。详情页面如图 4。10所示,这是点击了肉禽蛋品类以后跳转的页面,该页面向用户展示了公司现有相关类目的产品介绍。用户可以通过点击导航栏的产品介绍页面或者使用浏览器会后退功能回退到之前的产品大类页面。

4。1。4农场问问

（1）页面概述

为用户提供帮助页面，回答用户遇见的常见问题。

（2）详细介绍

图 4。11 农场问问

HTML

<p ng-controller="wenwenCtrl" class="wenwen">

<accordion>

     <expander class='expander' ng-repeat='expander in expanders' expander-title='expander。title'>

         {{expander。text}}

     </expander>

 </accordion>

</p>

JS

function accordion(){

  return {

          restrict : 'EA',

          replace : true,

          transclude : true,

          template : '<p ng-transclude></p>',

          controller : function() {

              var expanders = [];

              this。gotOpened = function(selectedExpander) {

                  angular。forEach(expanders, function(expander) {

                      if (selectedExpander != expander) {

                          expander。showMe = false;

                      }});};

              this。addExpander = function(expander) {

                  expanders。push(expander);

};}};};

function expander(){

  return {

          restrict : 'EA',

          replace : true,

          transclude : true,

          require : '^?accordion',

          scope : {   expanderTitle : '='    },

          template : '<p>'+ '<p class="ex-title" ng-click="toggle()">{{expanderTitle}}</p>'+ '<p class="ex-body" ng-show="showMe" ng-transclude></p>'+ '</p>',

          link : function(scope, iElement, iAttrs, accordionController) {              scope。showMe = false;

              accordionController。addExpander(scope);